什么是路由呢？通過(guò)改變 URL,在不重新請(qǐng)求頁(yè)面的情況下, 來(lái)更新視圖，路由他分幾種模式，常用的有hash模式和history模式等，其實(shí)大家可以簡(jiǎn)單理解成一個(gè)頁(yè)面就代表一個(gè)路由, 所謂不重新請(qǐng)求網(wǎng)頁(yè)更新視圖，就是頁(yè)面的跳轉(zhuǎn)，然后還有一系列的傳值，嵌套, 路由守衛(wèi)等。下面我們一起討論一下如何管理我們的路由。

大體思路

每個(gè)頁(yè)面都是一個(gè)路由，所以我們每創(chuàng)建一個(gè)頁(yè)面都要編寫一個(gè)路由json。最主要的就是路由之前的嵌套（父子路由）,拿到一個(gè)項(xiàng)目之后通常側(cè)邊欄和頂部是固定的（這里的固定是指通常不會(huì)隨著頁(yè)面跳轉(zhuǎn)而改變的模塊），然后右邊的區(qū)域是點(diǎn)擊會(huì)發(fā)生變化的，也就是跳轉(zhuǎn)，比如跳到home頁(yè)面啦、跳到A頁(yè)面啦等等，這三部分（上左下）通常我們認(rèn)為會(huì)在同一級(jí)路由里我們也可以認(rèn)為是“頂層路由”，然后右邊這部分是“頂層路由”的子路由，登錄頁(yè)面和頂層路由同級(jí)。我們還要通過(guò)路由守衛(wèi)來(lái)判斷用戶是否有權(quán)限跳轉(zhuǎn)到對(duì)應(yīng)頁(yè)面

代碼基于GitHub - wangkai123456/learnVueAdmin at v3

編寫路由文件

1、分模塊編寫
按照頁(yè)面功能劃分路由模塊，相同的功能頁(yè)面放到一個(gè)路由文件里。
優(yōu)點(diǎn)：方便管理，結(jié)構(gòu)清晰
缺點(diǎn)：如果權(quán)限管理方案設(shè)定的是路由由服務(wù)端返回則不太方便。（個(gè)人感覺服務(wù)端返回路由有點(diǎn)雞肋~）

A模塊路由編寫

然后在router/index.js 頁(yè)面引入，這里有個(gè)小坑，我們這里雖然用的是require的引入的模塊，但并不是按需加載的，比如我們打完包就會(huì)發(fā)現(xiàn)隨便他分開了幾個(gè)文件，但是那些文件是沒有內(nèi)容的，如果要用路由懶加載還需要進(jìn)行配置，這里只是入門教程暫時(shí)不涉略路由懶加載這塊有興趣的可以參考路由懶加載 | Vue Router

路由引入頁(yè)面

2、所有的路由集中存放
優(yōu)點(diǎn)：方便服務(wù)端一把鎖給你
缺點(diǎn)：不方便管理

這里就不放圖了，跟之前的v2的一樣

路由嵌套

在項(xiàng)目初始化之后（vue-cli）會(huì)有一個(gè)app.vue這個(gè)頁(yè)面，這個(gè)頁(yè)面就用來(lái)放頂層路由，主要用來(lái)顯示剛才說(shuō)的那三部分內(nèi)容（上、左、右）和登錄頁(yè)面

頂層路由的位置

我們會(huì)創(chuàng)建一個(gè)pages目錄去存放我們所有的頁(yè)面，包括頂層路由的哪些頁(yè)面，然后在這個(gè)文件里面我們會(huì)把頂層路由和子路由分開。pages 目錄直接存放頂層路由頁(yè)面，pages/Main目錄存放子路由頁(yè)面

pages目錄

在main文件里編寫子路由，以及提到過(guò)的側(cè)邊導(dǎo)航欄和頂部導(dǎo)航欄

入口頁(yè)面

路由跳轉(zhuǎn)及傳參

路由跳轉(zhuǎn)方式有許多，總圖來(lái)說(shuō)都是參照window.history 這個(gè)api。傳參呢，建議直接跟網(wǎng)頁(yè)傳參一樣？拼接，如果公司有需求不允許這樣，或者要求刷新一下傳的就要消失，則可以采用param的方式傳參，這里詳情可以參照編程式的導(dǎo)航 | Vue Router

傳參簡(jiǎn)介

路由守衛(wèi)

路由守衛(wèi)，也就是路由的鉤子函數(shù)，每次路由發(fā)生跳轉(zhuǎn)的時(shí)候都會(huì)觸發(fā)，并且我們可以阻止路由繼續(xù)跳轉(zhuǎn)，我們可以錄用這一特性來(lái)判斷用戶是否符合對(duì)應(yīng)路由的權(quán)限，下面我們簡(jiǎn)單來(lái)判斷用戶是否有token如果沒有則直接跳轉(zhuǎn)到登錄頁(yè)面。這里并不做路由守衛(wèi)函數(shù)的具體介紹只進(jìn)行了業(yè)務(wù)場(chǎng)景使用的介紹，有興趣了解路由守衛(wèi)函數(shù)的同學(xué)導(dǎo)航守衛(wèi) | Vue Router

路由守衛(wèi)

總結(jié)

在項(xiàng)目中，我們用路由進(jìn)行頁(yè)面的管理，主要理解他們是如何嵌套的，以及如何跳轉(zhuǎn)，路由跳轉(zhuǎn)傳參不建議傳到參數(shù)過(guò)多，可以簡(jiǎn)單傳個(gè)id之類的參數(shù)，當(dāng)我們傳的參數(shù)過(guò)多的時(shí)候我們就要考慮使用vuex來(lái)管理我們的參數(shù)了，然后 剛開始了解的時(shí)候并不推薦一次性全部掌握，先從上面的那些基礎(chǔ)的入手,當(dāng)我們能夠?qū)戇@些的時(shí)候，再去深入了解更多的玩法。大家有哪些地方希望一起討論的歡迎留言。