一、路由介紹
Creating a Single-page Application with Vue + Vue Router is dead simple. With Vue.js, we are already composing our application with components. When adding Vue Router to the mix, all we need to do is map our components to the routes and let Vue Router know where to render them.
使用Vue + vue-router創建單頁面應用程序非常簡單，使用Vue.js，我們已經在使用組件組成應用程序，將Vue Router添加到混合之中，我們要做的就是將組件映射到路由當中，並讓Vue Router知道在哪里渲染它們。
Vue Router是Vue.js的官方路由器。它與vue.js核心深度集成，使用vue.js輕松構建單頁面程序變得輕而易舉，功能包括;
- 嵌套路線/視圖映射
- 模塊化，基於組件的路由器配置
- 路由參數，查詢，通配符
- 查看由vue.js過渡系統提供動力的過渡效果
- 細粒度的導航控制
- 與自動活動CSS類的鏈接
- HTML5歷史記錄模式或哈希模式。在IE9中具有自動備用
- 定制滾動行為
二、引入方式
1.直接下載/CDN
https://unpkg.com/vue-router/dist/vue-router.js
vue-router在代碼中自動安裝’
<script src="/path/to/vue-router.js"></script>
2.NPM/CNPM
在vue2中，當我們創建腳手架時有一些配置選項
在第四步中詢問你是否安裝vue-router組件，我們一般情況下會默認安裝這個路由組件，項目構建完成便可以在package.json配置文件當中查看到對應的vue-router及版本，vue-router@3.0+需要使用vue@2.5+
如果在搭建腳手架時沒有安裝vue-router，可以通過以下命令進行安裝：
npm install --save vue-router
安裝完成之后在src目錄下新建路由配置文件並在main.js當中實例化Vue對象時使用router
Vue.use(Router)表示開啟組件Router對應的vue-router
三、簡單路由
可以在components目錄下面新建頁面，也可以直接在路由配置文件當中新建測試組件
在main.js中配置路由
在使用路由時我們可能看到標簽<router-link>相當於原生的<a>標簽，暫且可以這樣理解，前者的to屬性相當於后者的href屬性；
<router-view>表示渲染路徑匹配到的視圖組件
在app.vue文件中添加路由訪問
這樣就可以進行簡單的路由控制
四、動態路由傳參
我們也可以在路由跳轉的時候傳參，很多時候，我們需要將具有給定模式的路由映射到同一組件。例如，我們可能有一個User應為所有用戶呈現的組件，但具有不同的用戶ID。在vue-router我們可以在路徑中使用動態段以實現：
我們可以新建user.vue
在路由配置文件新增路由/user/:username/:userid
在app.vue增加鏈接訪問這個路由
我們在瀏覽器頁面可以看到路由跳轉的效果
上面傳遞了兩個參數，在同一路徑中可以有多個動態部分，他們會映射到相應字段$route.params上
| pattern | matched path | $route.params |
| /user/:username | /user/liufuqiang | {username: 'liufuqiang'} |
| /user/:username/:userid | /user/liufuqiang/6414116106 | {username: 'liufuqiang', userid: '6414116106'} |