vue-router是Vue.js官方的路由插件廊移，目前最新版本是3.0.1，用于單頁面應用中的導航圆到。vue只注于視圖層坏平，可是一個完整的單頁應用離不開路由功能，vue-route就是專門用于處理路由的渠概。
1.安裝
如果你是通過 vue-cli 創(chuàng)建的應用茶凳，應該就已經(jīng)默認集成了 vue-router ，可以檢查 package.json文件播揪，如圖：
如果不是通過 vue-cli 創(chuàng)建的應用贮喧，可以使用 npm 包管理器安裝
npm install vue-router -S
在 上個vue-complex 應用中，在src目錄下有一個 router 文件夾猪狈，該文件下有一個 index.js 文件箱沦，里面定義的就是應用的路由信息，在大型的應用中雇庙，路由其實很復雜谓形，這是為了對路由統(tǒng)一管理。在 vue 應用中使用路由状共，需要添加以下內(nèi)容
import Router from 'vue-router';
Vue.use(Router);
目前router目錄下的index.js內(nèi)容如下：
2.使用
從上圖中其實已經(jīng)可以簡單看到vue-router的使用套耕，在使用vue-router之前谁帕，需要先引入 vue-router峡继，然后把它當作一個插件添加到vue中。使用起來也很簡單匈挖，vue-router提供了兩個常用的組件碾牌，<router-link to="..."> 和<router-view> 康愤。
<router link to="...">組件 支持用戶在具有路由功能的應用中（點擊）導航。 通過 to 屬性指定目標地址舶吗，默認渲染成帶有正確鏈接的 <a>標簽（可以通過配置 tag 屬性生成別的標簽）征冷。另外，當目標路由成功激活時誓琼，鏈接元素自動設(shè)置一個表示激活的 CSS 類名检激。其中帶 to 屬性的值 ，其實就是router 的name 值腹侣。
<router-view>負責渲染路徑匹配到的組件叔收，比如在上圖的index.js文件中， path: '/'傲隶，代表的就是 跟路徑饺律，其實就是應用默認開始的路徑；component 對應的是組件跺株，表示 在地址欄輸入 / 時 將渲染 HelloWorld 組件的內(nèi)容复濒。該內(nèi)容將被渲染到 App.vue 中的<router-view />組件中。App.vue 內(nèi)容如下：
main.js文件內(nèi)容如下：
3.動態(tài)路由
我們經(jīng)常需要把某種模式匹配到的所有路由乒省，全都映射到同個組件巧颈。例如，我們有一個 User 組件袖扛，對于所有 ID 各不相同的用戶洛二，都要使用這個組件來渲染。那么攻锰，我們可以在 vue-router 的路由路徑中使用『動態(tài)路徑參數(shù)』（dynamic segment）來達到這個效果：
動態(tài)路由其實就是給路由路徑動態(tài)設(shè)置參數(shù)晾嘶。比如說一個個人中心界面，一般情況下娶吞，該界面的模塊都是固定的垒迂，不同的用戶看到的界面又各不相同，那是因為每個用戶在后臺存儲的用戶信息不一樣妒蛇，而前端界面机断，只是根據(jù)后臺數(shù)據(jù)渲染界面，所以可以看到不同的效果绣夺。這種情況下就需要用到動態(tài)路由吏奸，在開發(fā)階段，只會開發(fā)一個界面陶耍，也就是說只會有一個大組件奋蔚，這個組件對應路由中的一個路徑，而不同用戶跳轉(zhuǎn)的這個界面的時候只需要帶上一個用戶ID就可以獲取到用戶信息。例如：
現(xiàn)在 像 /user/foo 和 /user/bar 都將映射到相同的路由
4.嵌套路由
實際生活中的應用界面泊碑，通常由多層嵌套的組件組合而成坤按。同樣地，URL 中各段動態(tài)路徑也按某種結(jié)構(gòu)對應嵌套的各層組件馒过，例如：
借助 vue-router臭脓，使用嵌套路由配置，就可以很簡單地表達這種關(guān)系腹忽。
這里的 <router-view> 是最頂層的出口来累，渲染最高級路由匹配到的組件。同樣地窘奏，一個被渲染組件同樣可以包含自己的嵌套 <router-view>佃扼。例如，在 User 組件的模板添加一個 ：
要在嵌套的出口中渲染組件蔼夜，需要在 VueRouter 的參數(shù)中使用 children 配置：
訪問的時候把路徑拼起來就好了
5.編程式的導航
路由之間的轉(zhuǎn)跳兼耀，也可以不實先聲明，而是在用到的時候在 js 中調(diào)用接口實現(xiàn)跳轉(zhuǎn)求冷，這就是編程式路由瘤运。
router.push(location, onComplete?, onAbort?)
注意：在 Vue 實例內(nèi)部，你可以通過router訪問路由實例匠题。因此你可以調(diào)用this.router.push
想要導航到不同的 URL拯坟，則使用 router.push 方法。這個方法會向 history 棧添加一個新的記錄韭山，所以郁季，當用戶點擊瀏覽器后退按鈕時，則回到之前的 URL钱磅。
該方法的參數(shù)可以是一個字符串路徑梦裂，或者一個描述地址的對象
注意：如果提供了path，params會被忽略盖淡，上述例子中的query并不屬于這種情況年柠。取而代之的是下面例子的做法，你需要提供路由的name或手寫完整的帶有參數(shù)的path：(同樣的規(guī)則也適用于router-link組件的to屬性褪迟。)
router.replace(location, onComplete?, onAbort?)
跟 router.push 很像冗恨，唯一的不同就是，它不會向 history 添加新記錄味赃，而是跟它的方法名一樣 —— 替換掉當前的 history 記錄掀抹。
router.go(n)
這個方法的參數(shù)是一個整數(shù)，意思是在 history 記錄中向前或者后退多少步心俗，類似 window.history.go(n)傲武。
例子：
