vue-router路由安装与使用

1.vue-router路由安装

在当前项目根目录运行

npm install vue-router --save-dev

2.在App.vue增加 router-view标签

这里是路由页面的显示区域：

<router-view></router-view>

3.新建router文件夹，新建index.js

import Vue from 'vue'
import Router from 'vue-router'
import Pos from 'components/Pos'

Vue.use(Router)

export default new Router({
    routes: [
        {
            path: '/',
            name: 'Pos',
            component: Pos
        }
     ]
})

4.在main.js中引入 router/index.js

import router from './router' (如果文件名是index.js则可以省略 /index.js)
import router from './router/router.js' (如果文件名是其他则需要写全)

5.注意事项
路由配置：

<router-view name="left"></router-view>
<router-view></router-view>

routes: [
    {
        path:'/',
        name:'hi', 
        components:{ 
            default: Hello,
            left: Hi
        }
    }
]

1.有children子路由的不要写name；
2.default是配置没有name属性的router-view区域的内容；
3.component个数为多个的时候参数名加”s” => “components”，单个的时候不要加“s”。