Vue CLI配置Vue Router

一、安装Vue Router

安装命令：

npm install vue-router

安装后在根目录中的package.json中的dependencies会声明vue-router的依赖包

二、手动创建Router配置文件

1.在src下创建router文件夹
2.在router文件夹下创建router.js文件
3.在router.js文件中进行配置

import Vue from 'vue'
import Router from 'vue-router'
import Tow from '../components/Tow.vue'
import HelloWorld from '../components/HelloWorld.vue'

Vue.use(Router)

const routes = [
    {
        //当path: '/'时，此路由为默认路由首页
        path: '/',  
        name: 'HelloWorld',
        component: HelloWorld,
    },
    {
        path: '/Tow',
        name: 'Tow',
        component: Tow,
    },


    //配置说明
    //path: string,
    //component?: Component,
    //name?: string, // 命名路由
    //components?: { [name: string]: Component }, // 命名视图组件
    //redirect?: string | Location | Function,
    //props?: boolean | Object | Function,
    //alias?: string | Array<string>,
    //children?: Array<RouteConfig>, // 嵌套路由
    //beforeEnter?: (to: Route, from: Route, next: Function) => void,
    //meta?: any,
    //
     2.6.0+
    //caseSensitive?: boolean, // 匹配规则是否大小写敏感？(默认值：false)
    //pathToRegexpOptions?: Object // 编译正则的选项

]

export default new Router({
    name: 'RouterDefault',
    routes: routes
})

说明：
1.需要引入Vue、vue-router、也需要引入vue组件 …/components/Tow.vue
2.Vue.use(Router)安装路由功能
3.const routes 定义vue组件路由配置
4.new Router() 生成Router对象,且将const routes配置

三、将Router对象传入vue实例

在main.js中将Router对象传入vue实例

import RouterDefault  from './router/router'

new Vue({
  router:RouterDefault,
  render: h => h(App),
}).$mount('#app')

四、添加标签

在App.vue中(也可以是别的vue实例挂载页面)的id="app"下添加router-view

至此简单的配置已经完成

项目运行后,默认路由到{path: ‘/’,name: ‘HelloWorld’,…} 这个地址

可以使用下面方式进行路由跳转

<router-link to="/Tow">aaaa</router-link>

this.$router.push({ name: 'Tow'});