我們知道路由定義了一系列訪問的位址規則，路由引擎根據這些規則匹配找到對應的處理頁面，然後將請求**給頁進行處理。可以說所有的後端開發都是這樣做的，而前端路由是不存在"請求"一說的。
前端路由是找到位址匹配的乙個元件或者物件將其渲染出來。改變瀏覽器位址不向伺服器傳送請求有兩種方法，
一是在位址中加入#以欺騙瀏覽器，位址的改變是由於正在進行頁內導航；二是使用html5的window.history功能，使用url的hash來模擬乙個完整的url。
vue-router是官方提供的一套專用的路由工具庫，是vue的乙個外掛程式，我們需要在全域性引用中通過vue.use()將它引入到vue例項中，
使用vue-cli建立專案後（init初始化時vue-router確認y）
我們先來看一下專案src的結構，通過cmd進入到專案src目錄下，執行tree -f > list.txt
生成結構樹（儲存在list.txt中）：
結構如下：
src1、開啟main.js:├─assets
//靜態資源
│ └─image //
│
├─components
//元件
│ └─helloworld
│ helloworld.vue
│
└─router
//路由配置
│ └─index.js
│
//預設程式入口
│ main.js
│
1 import vue from 'vue'render是vue2新增的具有特色的方法，為了得到更好的執行速度，vue2也採用的類似react的virtual dom（虛擬dom）3 import router from './router'
45 vue.config.productiontip = false67
/*eslint-disable no-new */8
newvue()
2、然後我們在components中註冊幾個元件
3、開啟router/index.js配置路由
1 import vue from 'vue'："mode"，"history模式"，"hash模式"，"abstract模式"如果不使用history模式，當訪問rank的時候路由就會變成：2 import router from 'vue-router'
34 import singer from '@/components/rank/rank'
56 vue.use(router) //
註冊router
78 export default
newrouter(,
1520
]21 })
反之為：
這就是history模式和hash模式的區別，除此之外還有一種abstract模式
："router-link","router-view"
vue-router提供兩個指令標籤元件來處理這個導航與自動渲染邏輯：
我們使用整兩個標籤元件來完成乙個簡單的頁面布局：
在路由使用時要明確乙個原則就是：不直接引用路由定義，（即不要在router-link直接通過 to='conpontents/rank/rank' 來導向路由），當顯式引用路由定義的url一旦發生變化，所有引用的地方都要修改。
在router-link通過名稱引用路由：向to屬性傳入乙個物件顯式的宣告路由的名稱：
這裡留意使用v-bind繫結（簡寫：），因為這裡需要向router-link傳遞的是乙個物件而不是乙個字串："動態路由引數"，"params"，"$router.params"
vue-router將引數融入到路由的路徑定義之內成為路由的一部分，我們稱這種引數為"動態路徑引數"；
使用非常簡單，在引數名之前加上":"，然後將引數寫在路由定義的path內，
11、這樣定義之後，vue-router就會自動匹配/books/1、/books/2、...、/books/n 形式的路由模式，因為這樣定義的路由的數量是不確定的，所以也稱為"動態路由"。routers：
2、在中我們就可以加入乙個params的屬性來指定具體的引數值：
12//3、當我們導航進入圖書詳情頁之後，我們可能需要獲取屬性指定的引數值（即重新將:id引數讀取出來），我們可以通過$router.params來完成：...3
1 export default："children"，5 }
我們利用下面的場景，首頁/home/讀書詳情 頁面，讀書詳情也我們不需要底部的導航區域，但是我們使用之前的路由定義，所有的頁面都應該具有想用的底部導航條，按前面的路由結構是不可以導航到圖書詳情頁的，如下：
所以我們就需要另一種定義路由的方式，對前面的路由進行調整，
巢狀式路由又叫做子路由，要將路由顯示到子檢視中就要相應的子路由與之對應，我們只需要在路由定義中使用children陣列屬性就可以定義子路由了：
1需要注意的是以"/"開頭的巢狀路徑會被當做根路徑，所以不要在子路由上加上"/"；routers:[
28
9]
10},
11
12 ]
："redirect"，"alias"
重定向也是通過routes配置來完成，下面例子是從/a重定向到/b：
routes: [另外我們需要區別重定向和別名，『重定向』的意思是，當使用者訪問]//重定向的目標也可以是乙個命名的路由
routes: [}]
/a時，url 將會被替換成/b，然後匹配路由為/b，那麼『別名』又是什麼呢？
/a的別名是/b，意味著，當使用者訪問/b時，url 會保持為/b，但是路由匹配則為/a，就像使用者訪問/a一樣：
利用alias給路由設定別名
routes: [到這裡vue路由的基礎我們已經總結完畢，我們需要在實戰中不斷練習，多多的去解決問題，方能更好的使用路由 幫我們完成任務，同時為vue高階的路由知識打基礎]
前端路由與vue router
前端路由定義 在單頁面應用中，用hash改變來切換頁面，叫做前端路由 vue router 這就是vue路由。它是vue官方的路由外掛程式，適合構件單頁面應用。vue的但介面是依賴於路由和元件的的，路由用於設定訪問路徑，並將路徑和元件對映起來 router 路由匹配規則。每個路由匹配規則，都要包含兩...
vue router 動態路由與巢狀路由
動態段以冒號開始 x abc 它的 params 的值將在每個元件中以this.route.params的形式暴露出來 route.params.x route.params.pathmatch獲取當前路由萬用字元匹配的內容 使用動態路由引數時，元件例項會被復用，也就不會觸發生命週期鉤子 可以監聽路...
vue router路由巢狀
巢狀路由顧名思義就是路由的多層巢狀。結合vue router仿天貓底部導航欄，給元件me新增巢狀路由，也叫子路由。總共新增兩個子路由，分別命名collection.vue 我的收藏 和trace.vue 我的足跡 1 重構router index.js的路由配置，需要使用children陣列來定義子...