一、對路由的了解
1.什麼是路由
路由其實就是一組鍵值對or映射關系，在一個路由中應包含最基本的路徑群組件資訊。
示例如下：
上面展示的是一個路由組，即用" [ ] "将一組路由寫在一起，其中一個大括号中包裹的就是一個路由的資訊，此處展示的是一個命名路由，是以多了一個name屬性。
2.為什麼需要路由
以往的寫法是寫多個html頁面使用 <a> 标簽進行跳轉，但是有時一個頁面隻有部分内容需要替換or改變，此時再使用多頁面跳轉會有視窗抖動的感覺。
如上，展示的是淘寶特價版網頁端，其左邊選擇不同品牌，右邊資料會發生改變，這樣的就可以使用路由。當網址路徑發生改變時，相應元件就會展現。
二、路由的基本使用步驟
1.準備工作
- 安裝路由插件庫（注意版本對應問題，Vue2對應的插件庫是3版本，但是目前預設安裝最新版本）
- 在main.js中引入并應用路由插件庫，
- 配置router路由器檔案夾
（1）檔案夾結構如下：
建立了一個router檔案夾，并配置一個index.js檔案。
（2）index.js中具體内容如下：
此處采用的是預設暴露，routes表示配置一組路由對象
- 在main.js中引入路由器并綁定到Vue
下面以一個案例來具體講解後續工作
2.替換工作
（1）建立路由元件
先說什麼是路由元件，路由元件其實就是原本應該寫成多個html中的内容，将它們寫成元件形式，然後寫到路由表中。
為了和普通元件差別，一般會另外用一個名為pages的檔案夾存放路由元件，如下：
其中，在components中存儲的是一般元件，而在pages中存儲的是路由元件。
（2）使用路由元件
那麼在哪裡使用路由元件呢？
這取決于你需要在哪裡使用它，在哪個元件中需要展示該元件的區域效果，就在哪個元件中使用。
下面是一般元件和路由元件在App.vue中的使用差別
- 一般元件直接寫成元件名标簽形式
- 一般元件需要在使用它的元件中先①引入②注冊，但路由元件則不用
- 路由元件則要先用router-link将路由元件名包裹起來(此處隻是a标簽用router-link，若其他标簽不同，則後續補充)
- 且路由元件後面要使用 to="路徑"的形式來訓示具體要跳轉的路由位置，這裡的路徑與router檔案夾下配置的路由表中各路由的path屬性值 保持一緻
注意！上面标簽隻是相當于<a>标簽，具體呈現元件内容，還需要使用标簽
（這裡的router-view的位置才是真正呈現的地方）
細節補充
- 當路由元件被切換時，其實該路由對象是被銷毀了，而每次點選其标簽時，才會再去挂載
- 不同元件對象上的router屬性卻是同一個。即整個應用隻有一個router屬性擷取
三、路由進階
1.嵌套路由
（1）什麼是嵌套路由
嵌套路由 又稱 多級路由，是在一級路由（即第一個被嵌套的路由）的基礎上嵌套一層路由。為了嵌套的頁面而出現的一種寫法。
（2）怎麼寫嵌套路由
基本寫法和一級路由差不多，另外注意以下幾點即可
- 嵌套路由在建立路由時，是在其嵌套的一級路由下，用children:[…]包裹着的。如下：
- 在标簽中，嵌套路由的路徑要帶上父路由路徑。如下：
2.路由參數（父元件向子路由傳遞參數）
為什麼需要傳遞路由參數
因為根據不同的點選，要顯示不同的頁面，而随着點選的連結不同，有時會有向子路由傳遞不同參數的需求（即路由界面需要接收參數，而不是靜态頁面）。
傳遞參數的方式
- 利用路由的query參數
- 利用路由的params參數
- 路由的props配置
下面逐一介紹三種方式：
（1）query參數
query參數是路由對象的一個參數，可以使用console.log(this.$route)檢驗，如下：
下面以Message元件向Detail元件傳參為例，說明如何傳遞query參數，以及一些知識點。
在Message元件（參數傳遞方）中
先準備好要傳遞的資料，也可以從資料庫中擷取。
然後傳遞時，有以下兩種寫法：
- to的字元串寫法
①to前面要加上冒号，表示後面雙引号中要當成JS解析
②雙引号内的内容要用反單引号括起來，這是ES6的一種技術，表示模闆字元串
③參數要在路徑後加 ？ 然後指明參數屬性，再用 ${ 參數 } 攜帶參數值，多個參數之間用 & 連接配接
- to的對象寫法
①to前面要加上冒号，表示後面雙引号中要當成JS解析
②雙引号内的内容寫成一個對象，用大括号包住
③将要傳遞的query參數也寫成一個對象，以鍵值對的形式（更清晰
在Detail元件（參數接收方）中
想要應用參數 隻需要在模闆中擷取$route中的query參數攜帶的資料即可。
（2）params參數
params參數同樣也是路由對象的一個參數。是以其參數接收方和query參數相同，但與query不同的是其參數發送方不同。
下面主要介紹其參數發送方（依然用Message元件舉例）
傳遞時，同樣有以下兩種寫法（但與query參數傳遞略有不同）：
- to的字元串寫法
①to前面要加上冒号，表示後面雙引号中要當成JS解析
②雙引号内的内容要用反單引号括起來，這是ES6的一種技術，表示模闆字元串
③【不同之處】參數之間放在路徑後，加 / 即可。無需指明參數屬性名，隻需用 ${ 參數 } 攜帶參數值，多個參數之間還是用 / 連接配接
④【不同之處】由于第③步沒有指明參數屬性名，是以在router/index.js檔案中要修改路徑path值，指出相應位置的參數名來起到占位的作用
- to的對象寫法
①to前面要加上冒号，表示後面雙引号中要當成JS解析
②雙引号内的内容寫成一個對象，用大括号包住
③将要傳遞的parmas參數也寫成一個對象，以鍵值對的形式（更清晰
④【不同之處】将參數接收處（注意不是應用處）的path去掉（注意！不要把index.js檔案中的路由路徑去掉了啊），添加name屬性（因為params參數隻能使用name
并且要在router/index.js檔案中給傳遞參數方添加name屬性 【這叫做命名路由，此後可以直接用名字代替路徑】
在Detail元件（參數接收方）中
想要應用參數 隻需要在模闆中擷取$route中的params參數攜帶的資料即可。
3.路由的props配置
為什麼需要路由的props配置
- 因為在接收參數方元件中，直接在模闆中使用參數太過複雜，于是試圖将其簡化，進而更簡潔地使用。如下：
- 使用計算屬性可以達到簡化模闆中參數使用的效果，但是計算屬性寫起來又變繁雜了。如下：
于是，就可以使用路由的props配置來一次傳遞多個參數，從簡化模闆中參數的書寫。而路由的props配置主要有三種方法，下面将逐一介紹（均是從Message元件向Detail元件傳遞參數）
（1）值為對象
将props以對象形式寫在參數發送方的路由中。缺點是：參數是靜态寫死的
在參數接收方的元件中，添加props屬性，并添加參數的key
（2）值為布爾值
在參數發送方的路由中，添加一個props屬性，值為true。缺點是：隻能傳遞params參數，不能傳遞query參數
在參數接收方的元件中，添加props屬性，并添加參數的key
這種方法隻能傳遞params參數，是以在參數傳遞的方法上，要配置params參數的傳遞環境，如命名路由、路由路徑設定、應用參數等等
（3）值為函數
在參數發送方的路由中，添加一個props函數，其形參預設就是$route，可以按照以下方式配置參數。
（補充：也可以利用ES6中的解構指派來簡化return語句書寫，詳細見連結 Js連續解構指派）
在參數接收方的元件中，添加props屬性，并添加參數的key
最後，注意一個問題，我剛剛上面丢了一個東西，見下圖：
在标簽内，除了參數，别忘了文本内容，否則沒有可點選跳轉資訊了
4.小結——參數傳遞時的位置關系
在父子元件中，參數傳遞主要涉及以上三個部分中的四個位置，下面會逐一解釋各個位置的作用。
①：參數的傳遞方（也就是這裡涉及to的兩種寫法
②：參數的展示位置
③：參數的應用方or參數的接收方
④：進行props配置，以及與params參數相關的地方小補充：
5.程式設計式路由導航
為什麼需要程式設計式路由導航
其實這是為了不被給局限住，前面示範的<router-link> 隻是為了替代點選标簽<a>，而程式設計式路由導航使得任意元素都可以實作路由跳轉，可以是按鈕，也可以是圖檔等。
如何使用程式設計式路由導航
很簡單，它可以在任何位置，且不需要用特殊标簽包裹，隻要綁定一個點選事件即可
然後添加一個methods屬性，配置相應的方法，如下圖所示：
但是這裡涉及兩個API，分别是push({ })和replace({ })，其内容均和的to的對象寫法相同。
這裡說明一下：
push() 和 replace()其實是兩個與曆史記錄不同存儲方式有關的API，其中push()方法是路由跳轉時預設的屬性，它會将曆史記錄進行壓棧操作，是以可以自由前進後退。而replace()則會用目前頁面記錄覆寫前一條記錄。
補充知識點——三個與跳轉有關的API
6.緩存路由
為什麼需要緩存路由
因為路由元件在切換時會自動銷毀，而有時會需要使用者輸入一些輸入，此時如果切換元件，那麼已經輸入的資料就會丢失，是以需要對路由進行緩存，這樣當元件被切換時就不會走銷毀流程，避免不好的體驗。
如何使用緩存路由
如上圖所示，隻需要用keep-alive标簽将router-view包裹起來即可，這樣在此處展示的元件都會被緩存（此處是News元件和Message元件，都被緩存）
那麼如果隻想緩存某個元件怎麼辦？
答：添加include屬性，其值為要緩存的元件名。如下：
如果要緩存多個，但不是全部怎麼辦？
答：在include前添加冒号，并将值寫成數組形式
7.兩個路由元件獨有的生命周期鈎子
beforeDestroy() {
console.log('News元件即将被銷毀了')
clearInterval(this.timer)
},
mounted() {
//設定一個定時器
this.timer = setInterval(()=>{
this.opacity -=0.01
if(this.opacity <= 0) this.opacity = 1
},16)
}, //下面兩個是路由元件特有的生命周期鈎子，切換到目前元件時actived被觸發
//激活時觸發
activated() {
//設定一個定時器
this.timer = setInterval(()=>{
this.opacity -=0.01
if(this.opacity <= 0) this.opacity = 1
},16)
},
//失活時觸發
deactivated() {
console.log('News元件即将被銷毀了')
clearInterval(this.timer)
},