至此基本上vue2.0的內容全部結束，后面還有點elementUI和vue3.0的內容過幾天再來更新，
這幾天要回學校去參加畢業答辯，斷更幾天

一.相關理解

是vue的一個插件庫，專門用來實作spa（單頁面應用）的，也就是一直都是一個index.html頁面，他有他的導航區和展示區，雖然只有一個頁面但是我點擊導航區，展示區會出來不同內容，頁面也不會重繪也不會發生跳轉，照樣可以實作豐富的頁面展現

在前端里面的路由，我們的路徑就好比key值，value值就是我們的組件，vuerouter檢測到你的key為這個就會幫你去呈現對應的value

前端路由是組件，后端路由是函式（參考前面node.js）

二.基本路由

先完成一個簡單的靜態頁面搭建

導航區已就位，下面就是分組件，把我們展示區的內容放到組件里面去

要注意的是，app里面只是把展示區的內容占位，其他地方不要動

接下來就要發揮路由的作用了，下載匯入注冊

然后vm配置項一個全新的配置 router，但是在配置之前需要像vuex一樣先創建一個router檔案夾里面放入我們的index.js檔案，來創建一個路由器，專門拿來創建整個網頁的路由器，new出來一個路由器過后，我們說一個路由器是管理著多個路由的，所以多個路由直接來個routes，路由又是由key、value組合的，每個路由都是一個配置項，在里面寫入鍵值對

這樣才可以回去配置我們的配置項router

當我們配置好后，路徑就會出現一個#

我們原來實作跳轉靠的是一個a標簽，但是要用路由實作跳轉，需要用到一個特定的標簽 router-link，并且我們的href也就是要跳轉的目標也要改為 to，而且里面的值不是我們的鏈接不是我們的目標網頁，是我們在url地址中的路徑名，所以要記住這里沒有./因為不是一個檔案

而且你會發現使用了這個最終樣式，原來給a寫的樣式還是有，因為我們的router-link在頁面上呈現后就變成了a標簽

這個時候active就不能寫死了，用到一個規定的屬性 active-class，就可以根據我們點的誰active就給誰

最后一步，通過標簽router-view指定我們的展示區標簽放的位置

1.注意點

可以發現我們放在router管理的組件并沒有引入到父組件使用也沒有用組件標簽，而是通過定義了路由匹配規則后，讓他幫我們展現的，一般像這樣的組件叫做路由組件，而且一般是放在一個pages的檔案夾下的，我們的要匯入要寫組件標簽的叫做一般組件是放在components里面的
當我們點擊一個組件，另一個組件是被銷毀了

每個路由組件多了兩個api，一個是$route,一個是$router，值得注意的是，route是每個vc獨有的里面的資料是獨有的，但是router是共有的，你配置多少個路由都只有這一個router

三.嵌套路由

路由里面再來一個路由

由于是home里面的嵌套路由，所以要把代碼放到home里面去再進行拆分

可以看出來再分兩個news和message組件

主要看一下怎么來配置路由，我們剛才配的都叫一級路由，如果是路由下的嵌套路由那就是二級路由了，所以應該在這個路由里面來配置，一個全新的配置項 children而且是一個陣列，里面寫我們的每個路由，這里要注意二級路由之后就不用再帶/因為vue幫你決議的時候會給你自動加上

注意二級路由的router-link標簽里面的to這個設定，需要連同父級地址寫完

四.路由傳參（query）

接著前面的例子，假如我message串列里面每個資料都是ajax得到的，然后都可以點擊，沒點一個又在下面呈現一些不同的內容

其實這里又涉及到嵌套路由了，繼續往每一個message添加路由，點擊這個出現那個，點擊這個出現這個其他都銷毀，其實沒得這么麻煩，這里就定義一個組件就可以搞定

創建了下面的一個組件后，開始定義路由規則，三級路由出現，只定義一個即可

萬事俱備就差傳參

其實這個引數就在我們的$route身上，它上面有一個query專門處理查詢字串的引數的，為什么就能確定是傳給我的引數？因為當我們點擊了這個之后，他才會呈現他才會有vc實體物件，其他的都被銷毀了，所以在我們detail組件就可以把值拿到

那么這個值怎么傳過來？

兩種寫法：字串寫法

物件寫法

五.命名路由

可以簡化路由的跳轉

在我們定義路由的地方給路由取名字，我給我下面的三級路由來個name

我們以前寫了這么大一串的路徑，可以直接寫name配置項，值為剛才寫的name，只能寫在物件寫法里面

六.路由傳參（params）

如果要使用動態傳參，首先要對路由對于路徑的監測機制做修改

然后我們在接受引數這里也要改為params

最后最大的改變就是我們傳進來引數的形式不再是查詢字串了，而是這種類似于在后面還有路徑的形式，但是這并不是路徑只是引數

當然物件形式也是可以的，注意：如果帶的是params引數，這里只能寫name路徑，不能寫path路徑

七.路由的props配置

跟我們組件的props一樣也有三種寫法

方法一：寫在路由中的物件，路由中的全新配置項props，這里傳的值就是直接給這個路由的組件

對應的detail組件通過props來接受

但是這種方法使用極少，因為只能傳死資料
方法二：寫為一個布林值，他的意思就是會把這個路由組件收到的所有params引數以props形式給到這個組件

局限性就是只支持params
方法三：為一個函式，引數可以拿到$route,靠的就是這個回傳值

八.router-link的replace屬性

我們瀏覽器對于歷史記錄的保存是存在一個堆疊里面，然后router-link的的操作模式就是push模式，就是一直往堆疊里面壓，也叫壓堆疊，所以當我們當一次后退，指標就會回退一次也就是那個箭頭

我們router-link默認開啟的就是push模式，我們還有一種模式叫做replace模式，就是點擊一次前一次記錄就被銷毀了，所以一直存起的就這一次

如何開啟replace

直接給router-link標簽寫一個屬性replace

這里有一個易錯點，加入我給news和message開啟了replace，其他都是push當我依次點擊About、Home、news和message，主要是replace和push交叉哪一步，當我們點擊news時，會干掉前面這一條記錄，所以我們的home這條記錄就沒得了，點擊后退直接回到about這一步