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

總結

以上是生活随笔為你收集整理的vue-router路由安装与使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。