1.vue-router路由安裝

在當(dāng)前項(xiàng)目根目錄運(yùn)行

npm install vue-router --save-dev

2.在App.vue增加 router-view標(biāo)簽

這里是路由頁(yè)面的顯示區(qū)域：

<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' (如果文件名是其他則需要寫(xiě)全)

5.注意事項(xiàng)
路由配置：

<router-view name="left"></router-view> <router-view></router-view> routes: [{path:'/',name:'hi', components:{ default: Hello,left: Hi}} ]

1.有children子路由的不要寫(xiě)name；
2.default是配置沒(méi)有name屬性的router-view區(qū)域的內(nèi)容；
3.component個(gè)數(shù)為多個(gè)的時(shí)候參數(shù)名加”s” => “components”，單個(gè)的時(shí)候不要加“s”。

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。