安装

vue-router是一个插件包，所以我们还是需要用npm 来进行安装。打开命令行工具，进入你的项目目录，输入下面命令。

npm install vue-router --save

如果在一个模块化工程中使用它。必须通过Vue.use()明确地安装路由功能

注意：先引入vue,再引入vue-router

import Vue from 'vue'

import VueRouter from 'vue-router'

//显示声明使用VueRouter

Vue.use(VueRouter);

测试

创建一个vue-cli程序参考链接
安装参考安装标题
新建组件src/components/Content.vue和Main.vue

Content.vue

<template>

    <h1>内容</h1>

</template>

<script>

    export default {

        name: "Content"

    }

</script>

<style scoped>

</style>

Main.vue

<template>

    <h1>主页</h1>

</template>

<script>

    export default {

        name: "Main"

    }

</script>

<style scoped>

</style>

在src下新建一个文件router/index.js,进行创建路由和路由映射

默认情况下，我们进入一个网站的首页，应该先把首页渲染。所以可以设置默认路径。

import Vue from 'vue'

import VueRouter from 'vue-router'

//导入上面自定义的组件

import Content from "../components/Content";

import Main from "../components/Main";

//安装路由

Vue.use(VueRouter);

//配置导出路由

export default new VueRouter({

  routes:[

    {

      path: '/',

      redirect: '/main'

 	},

    {

      //路由路径

      path:'/content',

      //跳转的组件

      component:Content

    },

    {

      //路由路径

      path:'/main',

      //跳转的组件

      component:Main

    },

  ]

});

在main.js中挂载路由

import Vue from 'vue'

import App from './App.vue'

import router from "./router"

Vue.config.productionTip = false

new Vue({

  render: h => h(App),

  router

}).$mount('#app')

在App.vue中使用路由

<template>

  <div id="app">

    <img src="./assets/logo.png">

    <HelloWorld/>

    <router-link to="/main">首页</router-link>

    <router-link to="/content">内容</router-link>

    <router-view></router-view>

  </div>

</template>

....

实现效果

我们会发现URL中存在#,那怎么消除呢？

localhost:8081/#/content

使用HTML5的history模式

默认情况下，路径的改变使用的是URL的hash，如果我们希望使用H5的History模式，可以进行如下配置mode: 'history'。

import Vue from 'vue'

import VueRouter from 'vue-router'

//导入上面自定义的组件

import Content from "../components/Content";

import Main from "../components/Main";

//安装路由

Vue.use(VueRouter);

//配置导出路由

export default new VueRouter({

  routes:[

    {

      path: '/',

      redirect: '/main'

 	},

    {

      //路由路径

      path:'/content',

      //跳转的组件

      component:Content

    },

    {

      //路由路径

      path:'/main',

      //跳转的组件

      component:Main

    },

  ],

  mode: 'history'

});

巴特西

【vue-05】vue-cli

安装

测试

最新文章

热门文章