一、Vue中的路由
vue-router 是 vue 中提供的路由，
1.使用vue-router 的步驟：
（1）導入 vue 文件和 vue-router 文件
<script src="/path/to/vue.js"></script> <script src="/path/to/vue-router.js"></script>
（2）創建路由實例並配置路由規則
// 路由實例 const router=new VueRouter({ // 路由規則 routes:[] })
（3）將路由實例掛載到vue 實例上
const vm=new VTTCue({ el:'#app', data:{}, router:router })
（4）創建路由導航
（5）創建路由占位符
<div id='app'> <!-- 路由鏈接 --> <router-link to="組件路徑"></router-link> <router-link to="組件路徑"></router-link> <!-- 路由占位符 --> <router-view></router-view> </div>
二、路由的模式
vue 中路由的模式有兩種：hash模式，history模式，可以在路由配置文件中通過 mode 字段來指定當前使用的路由模式。默認是hash 模式。
history 模式容易發生一個問題，如果是頁面刷新的時候容易發生404錯誤。
詳細可以看（https://www.cnblogs.com/zhilili/p/14721911.html）
三、路由中的參數傳遞
vue-router 中的路由跳轉和參數傳遞主要有三種：
（1）通過動態路由方式
// 配置路由規則 const routes=[ { path:'/detail/:id', name:"Detail", component:Datail } ]; // 路由跳轉頁面時候 var id=1; this.$router.push('/detail/'+id) // 獲取路由傳遞的參數 this.$route.params.id
頁面刷新參數不會消失
可以在路由中設置多段參數，如下
| 模式 | 匹配的路徑 | $route.params |
| /user/:username | /user/even | {username:'evan'} |
| /user/:username/post/:post_id | /user/even/post/123 | {username:'even',post_id:'123'} |
（2）通過query 屬性傳值
// 配置路由規則 const routes=[ { path:'/detail', name:"Detail", component:Datail } ]; // 路由跳轉頁面時候 this.$router.push({ path:'/detail', query:{ name:'張三', id:1 } }) // 獲取路由傳遞的參數 this.$route.query.id this.$route.query.name
頁面刷新參數不會消失
（3）通過params 屬性傳值
// 配置路由規則 const routes=[ { path:'/detail', name:"Detail", component:Datail } ]; // 路由跳轉頁面時候 this.$router.push({ name:'Detail', params:{ name:'張三', id:1 } }) // 獲取路由傳遞的參數 this.$route.params.id this.$route.params.name
頁面刷新參數會消失。
四、動態路由
我們經常需要把某種模式匹配到的所有路由，全都映射到同個組件。例如，我們有一個 User 組件，對於所有 ID 各不相同的用戶，都要使用這個組件來渲染。那么，我們可以在 vue-router 的路由路徑中使用“動態路徑參數”(dynamic segment) 來達到這個效果：
const User = { template: '<div>User</div>' } const router = new VueRouter({ routes: [ // 動態路徑參數 以冒號開頭 { path: '/user/:id', component: User } ] })
像/user/foo 和 /user/bar 都將映射到相同的組件里面。
一個路由參數使用冒號“：”，當匹配一個路由的時候，它后面的參數就會被匹配到 this.$route.params 里面，我們可以通過它來獲取里面指定的參數。
動態路由參數的變化：
注意：如果是使用路由參數的時候，例如從 /user/foo 到/user/bar 的時候，原來的組件實例會被復用，因為他們兩個路徑對應的都是同一個路由組件，比起組件銷毀重建，復用更有效率，這就意味着user 組件的生命周期鈎子將不會被調用，如果想要獲取到變化的路由參數，可以使用watch監聽屬性來監聽路由的變化，或者使用新增的組件內的路由鈎子函數來獲取變化的路由參數。
（1）使用watch監聽屬性來監聽路由的變化：
const User = { template: '...', watch: { $route(to, from) { // 對路由變化作出響應... } } }
（2）或者使用2.2中新增的路由導航鈎子
const User = { template: '...', beforeRouteUpdate(to, from, next) { // react to route changes... // don't forget to call next() } }
五：路由中的生命周期鈎子
路由的導航守衛分為三種：全局路由導航守衛，單個路由導航守衛，組件內的導航守衛。
（1）全局路由導航守衛
* 前置路由導航守衛router.beforeEach()：
const router = new VueRouter({ ... }) router.beforeEach((to, from, next) => { // ... })
每個守衛接受三個參數：
to:是一個route對象，即將要進入的目標路由對象。
form:也是一個route對象，表示當前正要離開的路由。
next:是一個函數，一定要調用該方法來resolve 這個鈎子。
確保 next 函數在任何給的的導航說守衛中都被嚴格調用一次，他可以出現多余一次，但是只能在所有的邏輯路由都不重疊的情況下，否則鈎子都不會被解析或者報錯，如下;
// BAD router.beforeEach((to, from, next) => { if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' }) // 如果用戶未能驗證身份，則 `next` 會被調用兩次 next() }) // GOOD router.beforeEach((to, from, next) => { if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' }) else next() })
* 后置路由導航守衛router.afterEach((ro,from)=>{})
（2）單個路由導航守衛:
可以直接在路由配置上直接定義 beforeEnter 守衛：
const router = new VueRouter({ routes: [ { path: '/foo', component: Foo, beforeEnter: (to, from, next) => { // ... } } ] })
（3）組件內的導航守衛：
* beforeRouteEnter:
* beforeRouteUpdate(2.2新增）
* beforeRouteLeave
const Foo = { template: `...`, beforeRouteEnter(to, from, next) { // 在渲染該組件的對應路由被 confirm 前調用 // 不！能！獲取組件實例 `this` // 因為當守衛執行前，組件實例還沒被創建 }, beforeRouteUpdate(to, from, next) { // 在當前路由改變，但是該組件被復用時調用 // 舉例來說，對於一個帶有動態參數的路徑 /foo/:id，在 /foo/1 和 /foo/2 之間跳轉的時候， // 由於會渲染同樣的 Foo 組件，因此組件實例會被復用。而這個鈎子就會在這個情況下被調用。 // 可以訪問組件實例 `this` }, beforeRouteLeave(to, from, next) { // 導航離開該組件的對應路由時調用 // 可以訪問組件實例 `this` } }
beforeRouteEnter 守衛 不能 訪問 this，因為守衛在導航確認前被調用，因此即將登場的新組件還沒有被創建。
不過，可以通過傳遞一個回調給next 來訪問組件實例，在導航被確認的時候執行回調函數，並把組件實例作為回調方法的參數。
beforeRouteEnter (to, from, next) { next(vm => { // 通過 `vm` 訪問組件實例 }) }
注意 beforeRouteEnter 是支持給 next 傳遞回調的唯一守衛。對於 beforeRouteUpdate 和 beforeRouteLeave 來說，this 已經可用了，所以不支持傳遞回調，因為沒有必要了。
完整的導航解析流程：
- 導航被觸發。
- 在失活的組件中調用 beforeRouteLeave 守衛
- 調用全局的 beforeEach 守衛。
- 在重復的組件中調用 beforeRouteUpdate 守衛
- 在路由配置中調用 beforeEnter.
- 解析異步路由組件
- 在被激活的組件里面調用 beforeRouteEnter
- 調用全部的 beforeResolve 守衛
- 導航被確認
- 調用全局的afterEach 鈎子
- 觸發 DOM 更新
- 調用 beforeRouteEnter 守衛傳遞給 next 的回調函數，創建好的組件實例會在 next 的回調函數里面被調用。