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源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。