之前寫過一篇關於vue-router的文章，主要是介紹怎么結合cli2在項目中使用vue-router，比較的簡單，今天想結合cli3來總結一下vue-router的具體用法。
cli3
在介紹vue-router前，先簡單介紹一下cli3吧。
1，安裝vue-cli3：npm install -g @vue/cli
2，vue-cli版本查看：vue -V
3，創建項目：vue create name
4，運行項目：npm run serve
和cli2不同的時，在使用cli2創建項目以后，需要npm install下載相關依賴，然后執行npm run dev運行項目，但是在cli3中，創建項目以后，直接執行命令npm run dev就可以運行項目了。
路由router
安裝
1，創建項目
vue create vuerouter
2，安裝路由：創建項目后，在項目的根目錄執行下面的命令安裝路由
npm install vue-router --save
路由安裝成功后，就可以在項目中配置路由了。
但是在cli3中，我們除了可以使用上面的方式在項目中安裝路由外，還可以使用命令vue add router在項目中添加路由。
配置路由
通過實現上面的頁面切換效果來展示路由的簡單配置。
1，在src文件夾下新建router文件夾，在router文件夾下面新建router.js；在src文件夾下面新建page文件夾，在page文件夾下面新建one.vue和two.vue兩個文件，並添加最簡單的內容。
2，路由配置：在router.js文件中，引入路由和需要用到的文件，並進行跳轉路由配置，也就是那個路徑需要對應那個頁面。
3，在main.js文件中，引入剛剛配置的路由。
4，在App.js中添加路由導航按鈕和路由出口
經過上面4個步驟，路由的雛形就已經完成的差不多了，當我們點擊兩個路由導航按鈕，下面路由出口占位符的地方會分別訪問兩個路由對應的頁面，展示不同的效果：
當我們使用元素查看器，查看DOM結構的時候回發現，當我們點擊到某個按鈕時，該按鈕會添加兩個默認的樣式：
router-link-exact-active：表示當前鏈接被嚴格匹配
router-link-active：表示當前鏈接被激活
所以，我們可以利用這兩個類名對當前激活鏈接和嚴格匹配鏈接進行樣式設置。
路由重定向
在上面的例子中，當我們點擊導航按鈕的時候，下面會出現相應的頁面內容，但是在剛開始進入頁面的時候，不做任何操作，下面是沒有任何顯示的。
這是因為根據路由配置，頁面one對應的路由是http://localhost:8080/#/one，頁面two對應的路由是http://localhost:8080/#/two，而在頁面剛開始，沒有點擊的時候，頁面訪問的是http://localhost:8080，如果我們需要在頁面初始化的時候，也能默認顯示頁面one，就需要使用頁面重定向。
“重定向”的意思是，當用戶訪問 /a時，URL 將會被替換成 /b，然后匹配路由為 /b，
所以我們需要將頁面初始化的時候默認顯示的路徑重定向為頁面one對應的路徑就可以了，只需要在router.js中進行簡單配置就可以了。
路由別名
和路由重定向不同的是，/a 的別名是 /b，意味着，當用戶訪問 /b 時，URL 會保持為 /b，但是路由匹配則為/a，就像用戶訪問 /a 一樣。
例如，在上面的例子中，我們為路由/noe添加一個別名/aaa，當我們在地址欄中輸入http://localhost:8080/#/aaa的時候，地址保持/aaa的后綴不變，但是匹配的是路由/one所對應的頁面。
“別名”的功能讓你可以自由地將 UI 結構映射到任意的 URL，而不是受限於配置的嵌套路由結構。
代碼下載：點這里
編程式導航
在上面的例子中，我們通過router-link添加導航按鈕實現了頁面跳轉，在vue-router中，我們還可以借助router的實例方法實現編程式導航，在官網中對$router的介紹如下：
現在，我們修改上面例子中的one.vue這個文件：
當我們點擊第二個按鈕的時候，就會觸發頁面跳轉了。
路由傳參
在展示路由傳參之前，先整理上面的例子。
首先在page文件下添加thr.vue文件，並將thr.vue、two.vue和one.vue三個文件改為最簡單結構：
然后在router.js中配置路由，並在App.js中完善導航按鈕
接下來依次演示三種路由傳參。
1、params傳參（url中顯示參數）
1.1、router-link導航
1，要實現這種傳參，需要在定義path的時候定義參數名和格式：
2，在路由導航上傳遞參數
3，獲取參數
當我們點擊路由導航跳轉到第一個頁面的時候，就可以在這個頁面獲取到傳遞進來的參數了。
1.2、編程式導航
1，在定義path的時候定義參數名和格式：
2，路由跳轉時傳遞參數
3，獲取參數（當我們點擊two.vue頁面的按鈕觸發路由跳轉后，就可以在one.vue頁面獲取到傳遞的參數）
2、params傳參（url中不顯示參數）
2.1、router-link導航
1，定義路由的時候給路由添加name屬性為映射的路徑取一個別名
2，在路由導航上添加參數
3，獲取參數
相比於上面一種傳參方式，這種方式的安全性更高，但是，使用這種方式的時候，刷新頁面會丟失參數。
2.2、編程式導航
1，定義路由的時候給路由添加name屬性為映射的路徑取一個別名
2，路由跳轉時向目標頁面傳遞自定義數據
3，獲取參數：當我們點擊one.vue頁面的按鈕進行頁面跳轉時，就可以在two.vue頁面獲取到傳遞過來的參數了
3、使用Query實現路由傳參
1，在路由導航中添加需要傳遞的參數：
2，獲取參數
代碼下載：點這里