vue-router監聽路由參數的變化
watch: {
'$route' (to, from) {
// 對路由變化作出響應...
}
}
完整的 vue-router 導航解析流程
1.導航被觸發；
2.在失活的組件裏調用beforeRouteLeave守衛；
3.調用全局beforeEach守衛；
4.在複用組件裏調用beforeRouteUpdate守衛；
5.調用路由配置裏的beforeEnter守衛；
6.解析異步路由組件；
7.在被激活的組件裏調用beforeRouteEnter守衛；
8.調用全局beforeResolve守衛；
9.導航被確認；
10..調用全局的afterEach鉤子；
11.DOM更新；
12.用創建好的實例調用beforeRouteEnter守衛中傳給next的回調函數。
// 路由配置守衛即配置在路由對象中
// 組件實力的導航守衛：beforeRouteLeave、beforeRouteEnter、beforeRouteUpdate
// 全局守衛：beforeEach、beforeResolve、afterEach
// 路由配置守衛：beforeEnter
編程式導航
// 字符串
router.push('home')
// 對象
router.push({ path: 'home' })
// 命名的路由
router.push({ name: 'user', params: { userId: '123' }})
// 帶查詢參數，變成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})
TIP：如果使用了path，則params不會生效，需要使用query，params搭配name使用
vue-router有哪幾種導航鉤子（ 導航守衛 ）
全局鉤子函數：定義在全局的路由對象中，主要有：
beforeEach：前置守衛，在路由切換開始時調用
beforeResolve：解析守衛，在導航被確認之前，同時在所有組件內守衛和異步路由組件被解析之後被調用
afterEach：後置鉤子，在每次路由切換成功進入激活階段時被調用
單獨路由獨享的守衛：
beforeEnter ：可以在路由配置上直接定義beforeEnter 鉤子
組件的鉤子函數：定義在組件的router選項中：
beforeRouteEnter：在渲染該組件的對應路由被 confirm 前調用，不能獲取組件實例 `this`，因爲當守衛執行前，組件實例還沒被創建
beforeRouteUpdate：在當前路由改變，但是該組件被複用時調用， 舉例來說，對於一個帶有動態參數的路徑 /foo/:id，在 /foo/1 和 /foo/2 之間跳轉的時候，由於會渲染同樣的 Foo 組件，因此組件實例會被複用。而這個鉤子就會在這個情況下被調用。
beforeRouteLeave： 導航離開該組件的對應路由時調用
TIP：導航鉤子接收三個參數：to，from，next，通過調用next()，傳入不同的參數，可以改變路由的跳轉。
動態路由
我們經常需要把某種模式匹配到的所有路由，全都映射到同個組件。例如，我們有一個 User 組件，對於所有 ID 各不相同的用戶，都要使用這個組件來渲染。那麼，我們可以在 vue-router 的路由路徑中使用『動態路徑參數』（dynamic segment）來達到這個效果：
export default new Router({
routes: [
{
path: '/hi/:id',
name: 'hi',
component: hi
}
]
})
在vue組件中，使用params獲取參數：
<template>
<div class="hello">
<p>{{$route.params.id}}</p>
</div>
</template>
嵌套路由
在路由文件中使用children屬性定義對應的子路由：
export default new Router({
routes: [
{
path: '/me',
name: 'Me',
component: Me,
children: [
{
path: 'collection',
name: 'Collection',
component: Collection
}
]
}
]
})
路由懶加載
結合 Vue 的異步組件和 Webpack的代碼分割功能，實現路由組件的懶加載：
const Foo = () => import('./Foo.vue')
TIP：如果使用的是 Babel，需要添加 syntax-dynamic-import 插件，才能使 Babel 可以正確地解析語法。
在路由配置中什麼都不需要改變，只需要像往常一樣使用 Foo：
const router = new VueRouter({
routes: [
{ path: '/foo', component: Foo }
]
})
有時候我們想把某個路由下的所有組件都打包在同個異步塊 (chunk) 中。只需要使用 命名 chunk，一個特殊的註釋語法來提供 chunk name (需要 Webpack > 2.4)。Webpack 會將任何一個異步模塊與相同的塊名稱組合到相同的異步塊中。
const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')
const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue')
vue-router路由的兩種模式：hash和history
hash模式的URL中有“#”，其工作原理是hashchange事件，可以在window監聽hash的變化。
window.onhashchange = function(event){
console.log(event);
}
history模式的工作原理是HTML5新增的history.pushState和window.onpopstate事件，這種模式下URL中沒有“#”，與正常的url無異，但當f5刷新頁面時，頁面會報404，所以需要後端的配合，如果 URL匹配不到任何靜態資源，則應該返回 index.html 頁面，這個頁面就是你 app 依賴的頁面。