中文文檔：https://router.vuejs.org/zh/

Vue Router 是Vue.js官方的路由管理器。它和 Vue.js 的核心深度集成，讓構(gòu)建單頁(yè)面應(yīng)用變得易如反掌。路由實(shí)際上就是可以理解為指向，就是我在頁(yè)面上點(diǎn)擊一個(gè)按鈕需要跳轉(zhuǎn)到對(duì)應(yīng)的頁(yè)面，這就是路由跳轉(zhuǎn)；

首先我們來(lái)學(xué)習(xí)三個(gè)單詞（route，routes，router）：

route：首先它是個(gè)單數(shù)，譯為路由，即我們可以理解為單個(gè)路由或者某一個(gè)路由； routes：它是個(gè)復(fù)數(shù)，表示多個(gè)的集合才能為復(fù)數(shù)；即我們可以理解為多個(gè)路由的集合，JS中表示多種不同狀態(tài)的集合的形式只有數(shù)組和對(duì)象兩種，事實(shí)上官方定義routes是一個(gè)數(shù)組；所以我們記住了，routes表示多個(gè)數(shù)組的集合； router：譯為路由器，上面都是路由，這個(gè)是路由器，我們可以理解為一個(gè)容器包含上述兩個(gè)或者說(shuō)它是一個(gè)管理者，負(fù)責(zé)管理上述兩個(gè)；舉個(gè)常見(jiàn)的場(chǎng)景的例子：當(dāng)用戶(hù)在頁(yè)面上點(diǎn)擊按鈕的時(shí)候，這個(gè)時(shí)候router就會(huì)去routes中去查找route，就是說(shuō)路由器會(huì)去路由集合中找對(duì)應(yīng)的路由；

我們結(jié)合一個(gè)小demo來(lái)看（文章有點(diǎn)長(zhǎng)，耐心慢慢看，學(xué)得慢才能進(jìn)步的快，當(dāng)然可以跟著一起敲）：

首先需要安裝vue-cli來(lái)構(gòu)建一個(gè)vue的開(kāi)發(fā)環(huán)境（怎么安裝這里不講，自己百度去，如果這種問(wèn)題自己都解決不了的話(huà)，后面的知識(shí)可能對(duì)你來(lái)說(shuō)收益不大）

安裝完vue-cli之后，我們的項(xiàng)目目錄結(jié)構(gòu)如下：

然后我們?cè)诿钚兄休斎雗pm install vue-router -g來(lái)安裝vue-router，安裝完之后我們可以打開(kāi)package.json文件，在package.json文件中可以看到vue-router的版本號(hào)；

到這一步我們的準(zhǔn)備工作就完成了，要進(jìn)行寫(xiě)demo了；

我們?cè)趕rc目錄下新建三個(gè)文件，分別為page1.vue和page2.vue以及router.js：

page1.vue：

<template> <div><h1>page1</h1><p>{{msg}}</p> </div></template><script> export default {data () { return {msg: '我是page1組件' }} }</script>

page2.vue：

<template> <div><h1>page2</h1><p>{{msg}}</p> </div></template><script> export default {data () { return {msg: '我是page2組件' }} }</script>

router.js

//引入vueimport Vue from ’vue’;//引入vue-routerimport VueRouter from ’vue-router’;//第三方庫(kù)需要use一下才能用Vue.use(VueRouter)//引用page1頁(yè)面import page1 from ’./page1.vue’;//引用page2頁(yè)面import page2 from ’./page2.vue’;//定義routes路由的集合，數(shù)組類(lèi)型const routes=[ //單個(gè)路由均為對(duì)象類(lèi)型，path代表的是路徑，component代表組件 {path:’/page1’,component:page1}, {path:'/page2',component:page2}]//實(shí)例化VueRouter并將routes添加進(jìn)去const router=new VueRouter({//ES6簡(jiǎn)寫(xiě)，等于routes：routes routes});//拋出這個(gè)這個(gè)實(shí)例對(duì)象方便外部讀取以及訪問(wèn)export default router

這里我們?cè)傩薷囊幌耺ain.js

import Vue from ’vue’import App from ’./App’//引用router.jsimport router from ’./router.js’Vue.config.productionTip = false/* eslint-disable no-new */new Vue({ el: ’#app’,//一定要注入到vue的實(shí)例對(duì)象上 router, components: { App }, template: ’<App/>’})

修改App.vue

<template> <div id='app'> <img src='http://m.baoyu77737.com/bcjs/assets/logo.png'> <div>//router-link定義頁(yè)面中點(diǎn)擊觸發(fā)部分 <router-link to='/page1'>Page1</router-link> <router-link to='/page2'>Page2</router-link> </div>//router-view定義頁(yè)面中顯示部分 <router-view></router-view> </div></template><script>export default { name: ’App’}</script><style>#app { font-family: ’Avenir’, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px;}</style>

就這樣，我們的頁(yè)面就可以進(jìn)行路由跳轉(zhuǎn)和切換了，路由的基本使用就完成了；但是有個(gè)問(wèn)題就是我們第一次進(jìn)去是看不到路由頁(yè)面的，這是因?yàn)槲覀儧](méi)有設(shè)置默認(rèn)值，我們首次進(jìn)入的時(shí)候路徑是為空的，那么我們可以這么解決：

router.js

import Vue from ’vue’;import VueRouter from ’vue-router’;Vue.use(VueRouter)import page1 from ’./page1.vue’;import page2 from ’./page2.vue’;import user from ’./user.vue’const routes=[ {path:’/page1’,component:page1}, {path:'/page2',component:page2}, //可以配置重定向 {path:’’,redirect:'page1'} //或者重新寫(xiě)個(gè)路徑為空的路由 {path:'',component:page1}]const router=new VueRouter({ routes});export default router

上面的兩種解決方案都是可以解決的，配置重定向的意思就是當(dāng)匹配到路徑為空的時(shí)候，就會(huì)重定向到page1，執(zhí)行page1的路由；或者我們也可以重新配置個(gè)路由，路徑為空的時(shí)候router-view展示page1的頁(yè)面；

用重定向和單獨(dú)配置路由的區(qū)別：

重定向?qū)嶋H上是當(dāng)匹配到路徑符合條件的時(shí)候去執(zhí)行對(duì)應(yīng)的路由，當(dāng)然這個(gè)時(shí)候的url上面的地址顯示的是對(duì)應(yīng)的路由，頁(yè)面也是對(duì)應(yīng)的路由頁(yè)面；

重新配置路由是當(dāng)匹配到路徑符合條件的時(shí)候，router-view頁(yè)面展示部分負(fù)責(zé)拿符合條件路由的頁(yè)面來(lái)展示，實(shí)際上url是沒(méi)有發(fā)生變化的；

那么還有些復(fù)雜情況，是基本路由實(shí)現(xiàn)不了的；我們來(lái)接著往下看

動(dòng)態(tài)路由匹配：

其實(shí)我們的生活中有很多這樣的例子，不知道大家留意沒(méi)有？比如一個(gè)網(wǎng)站或者后臺(tái)管理系統(tǒng)中，在我們登錄之后，是不是通常會(huì)有一個(gè)歡迎回來(lái)，XXX之類(lèi)的提示語(yǔ)，這個(gè)我們就可以通過(guò)動(dòng)態(tài)路由來(lái)實(shí)現(xiàn)這個(gè)效果；

首先在src目錄下新建一個(gè)user.vue文件：

<template> <div><h1>user</h1> //這里可以通過(guò)$route.params.name來(lái)獲取路由的參數(shù)<p>歡迎回來(lái),{{$route.params.name}}</p> </div></template><script> export default {data () { return {msg: '我是page1組件' }} }</script>

然后我們修改App.vue文件的代碼：

<template> <div id='app'> <img src='http://m.baoyu77737.com/bcjs/assets/logo.png'> <div> <router-link to='/page1'>Page1</router-link> <router-link to='/page2'>Page2</router-link> </div>//添加兩個(gè)router-link標(biāo)簽 <div> <router-link to='/user/xianyu'>動(dòng)態(tài)路由咸魚(yú)</router-link> <router-link to='/user/mengxiang'>動(dòng)態(tài)路由夢(mèng)想</router-link> </div> <router-view></router-view> </div></template><script>export default { name: ’App’}</script><style>#app { font-family: ’Avenir’, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px;}</style>

修改我們的router.js

import Vue from ’vue’;import VueRouter from ’vue-router’;Vue.use(VueRouter)import page1 from ’./page1.vue’;import page2 from ’./page2.vue’;import user from ’./user.vue’const routes=[ {path:’/page1’,component:page1}, {path:'/page2',component:page2}, // {path:’’,redirect:'page1'} {path:'',component:page1}, //使用冒號(hào)標(biāo)記，當(dāng)匹配到的時(shí)候，參數(shù)值會(huì)被設(shè)置到this.$route.params中 {path:'/user/:name',component:user} ]const router=new VueRouter({ routes});export default router

配置好了，不出意外是能正常運(yùn)行的，我們來(lái)看一下效果：

動(dòng)態(tài)路由匹配給我們提供了方便，使得我們通過(guò)配置一個(gè)路由來(lái)實(shí)現(xiàn)頁(yè)面局部修改的效果，給用戶(hù)造成一種多個(gè)頁(yè)面的感覺(jué)，是不是很酷！！！

酷的同時(shí)也會(huì)給我們帶來(lái)一些問(wèn)題，因?yàn)槭褂寐酚蓞?shù)時(shí)，從/user/xianyu導(dǎo)航到/user/mengxiang，原來(lái)的組件實(shí)例會(huì)被復(fù)用，兩個(gè)路由都渲染同個(gè)組件，比起銷(xiāo)毀再創(chuàng)建，顯示復(fù)用顯得效率更高，帶來(lái)的的只管問(wèn)題就是生命周期鉤子函數(shù)不會(huì)再被調(diào)用，也就是不會(huì)再被觸發(fā)；但是辦法總比問(wèn)題多，我們可以通過(guò)監(jiān)聽(tīng)$route對(duì)象來(lái)實(shí)現(xiàn);

修改user.vue的代碼

<template> <div><h1>user</h1><p>歡迎回來(lái),{{msg}}</p> </div></template><script> export default {data () { return {// msg: '我是page1組件'msg:'' }},watch:{//to表示即將要進(jìn)入的那個(gè)組件，from表示從哪個(gè)組件過(guò)來(lái)的 $route(to,from){this.msg=to.params.name; console.log(111); }} }</script>

效果圖如下：

我們可以很明顯的看到我們監(jiān)聽(tīng)的$route對(duì)象被觸發(fā)了，控制臺(tái)也輸出了；

下面我們來(lái)一起看一下嵌套路由：

嵌套路由：

很多時(shí)候我們的頁(yè)面結(jié)構(gòu)決定了我們可能需要嵌套路由，比如當(dāng)我們進(jìn)入主頁(yè)之后有分類(lèi)，然后當(dāng)選擇其中一個(gè)分類(lèi)之后進(jìn)入對(duì)應(yīng)的詳情，這個(gè)時(shí)候我們就可以用到嵌套路由；官方文檔中給我們提供了一個(gè)children屬性，這個(gè)屬性是一個(gè)數(shù)組類(lèi)型，里面實(shí)際放著一組路由；這個(gè)時(shí)候父子關(guān)系結(jié)構(gòu)就出來(lái)了，所以children屬性里面的是路由相對(duì)來(lái)說(shuō)是children屬性外部路由的子路由；

好記性不如爛代碼，讓我們通過(guò)代碼來(lái)看一看：

首先在我們的src目錄下新建兩個(gè)vue文件，分別是phone.vue和computer.vue

phone.vue

<template> <div><p>{{msg}}</p> </div></template><script> export default {data () { return {msg: '嵌套手機(jī)組件' }} }</script>

computer.vue

<template> <div><p>{{msg}}</p> </div></template><script> export default {data () { return {msg: '嵌套電腦組件' }} }</script>

然后我們?cè)傩薷奈覀兊腁pp.vue文件：

<template> <div id='app'> <img src='http://m.baoyu77737.com/bcjs/assets/logo.png'> <div> <router-link to='/page1'>Page1</router-link> </div> <router-view></router-view> </div></template><script>export default { name: ’App’}</script><style>#app { font-family: ’Avenir’, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px;}</style>

通過(guò)上面的App.vue文件我們可以看到，我們此時(shí)頁(yè)面只有一個(gè)page1的標(biāo)簽了；

我們?cè)賮?lái)修改router.js

import Vue from ’vue’;import VueRouter from ’vue-router’;Vue.use(VueRouter)import page1 from ’./page1.vue’;import page2 from ’./page2.vue’;import user from ’./user.vue’;import phone from ’./phone.vue’;import computer from ’./computer.vue’const routes=[ {path:’/page1’,component:page1,children: [ {path: 'phone',component: phone }, {path: 'computer',component: computer },] }, // {path:'/page2',component:page2}, // // {path:’’,redirect:'page1'} // {path:'',component:page1}, // {path:'/user/:name',component:user} ]const router=new VueRouter({ routes});export default router

為了大家看的直觀點(diǎn)，其他路由全部注釋了，頁(yè)面只剩下/page1這一個(gè)路由了；

上面說(shuō)到了，children屬性其實(shí)就是一個(gè)子路由集合，數(shù)組結(jié)構(gòu)里面放著子路由；

效果圖如下：

路由導(dǎo)航兩種方式：

標(biāo)簽導(dǎo)航：標(biāo)簽導(dǎo)航<router-link><router-link>是通過(guò)轉(zhuǎn)義為<a></a>標(biāo)簽進(jìn)行跳轉(zhuǎn)，其中router-link標(biāo)簽中的to屬性會(huì)被轉(zhuǎn)義為a標(biāo)簽中的href屬性；

//跳轉(zhuǎn)到名為user路由，并傳遞參數(shù)userId<router-link :to='{ name: ’user’, params: { userId: 123 }}'>User</router-link>

編程式導(dǎo)航：我們可以通過(guò)this.$router.push()這個(gè)方法來(lái)實(shí)現(xiàn)編程式導(dǎo)航，當(dāng)然也可以實(shí)現(xiàn)參數(shù)傳遞，這種編程式導(dǎo)航一般是用于按鈕點(diǎn)擊之后跳轉(zhuǎn)

router.push({ name: ’user’, params: { userId: 123 }})

這兩者都會(huì)把路由導(dǎo)航到user/123路徑

命名路由：

有的時(shí)候，通過(guò)一個(gè)名稱(chēng)來(lái)標(biāo)識(shí)一個(gè)路由顯得更方便一些，所以官方為了方便我們偷懶，又給我們?cè)诼酚芍刑砑恿艘粋€(gè)name屬性，命名這個(gè)屬性之后我們?cè)L問(wèn)這個(gè)屬性就等于直接訪問(wèn)到路由；

普通路由：

router.push({ path: ’/user/:userId’, params: { userId: 123 }})

命名路由：

router.push({ name: ’user’, params: { userId: 123 }})

其實(shí)兩者并沒(méi)有什么區(qū)別，只是提供了兩種方式來(lái)訪問(wèn)路由，可以通過(guò)路徑來(lái)匹配也可以通過(guò)別名來(lái)匹配；

以上就是Vue路由vue-router詳細(xì)講解指南的詳細(xì)內(nèi)容，更多關(guān)于Vue路由講解的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章！