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”。

本文同步分享在 博客“zy1281539626”（CSDN）。
若有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一块儿分享。