配置
如果在一個模塊化工程中使用它瞄摊，必須要通過Vue.use()明確地安裝路由功能：
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
基礎(chǔ)
Getting Started
HTML
<div id="app">
<h1>Hello App!</h1>
<p>
<!-- 使用 router-link 組件來導航. -->
<!-- 通過傳入 `to` 屬性指定鏈接. -->
<!-- <router-link> 默認會被渲染成一個 `<a>` 標簽 -->
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
</p>
<!-- 路由出口 -->
<!-- 路由匹配到的組件將渲染在這里 -->
<router-view></router-view>
</div>
javaScript
// 0. 如果使用模塊化機制編程方援，導入Vue和VueRouter送丰，要調(diào)用 Vue.use(VueRouter)
// 1. 定義（路由）組件会油。
// 可以從其他文件 import 進來
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
// 2. 定義路由
// 每個路由應該映射一個組件珠叔。 其中"component" 可以是
// 通過 Vue.extend() 創(chuàng)建的組件構(gòu)造器炉峰，
// 或者复颈，只是一個組件配置對象蚓曼。
const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
]
// 3. 創(chuàng)建 router 實例亲澡，然后傳 `routes` 配置
const router = new VueRouter({
routes // （縮寫）相當于 routes: routes
})
// 4. 創(chuàng)建和掛載根實例。
// 記得要通過 router 配置參數(shù)注入路由纫版，
// 從而讓整個應用都有路由功能
const app = new Vue({
router
}).$mount('#app')
// 現(xiàn)在床绪，應用已經(jīng)啟動了！
動態(tài)路由匹配
通俗的講就是，路徑中包含參數(shù)癞己，而對應的組件是一定的膀斋。在線例子
響應路由參數(shù)的變化
當使用路由參數(shù)時，原來的組件實例會被復用痹雅，組件的生命周期鉤子不會再被調(diào)用仰担。
因為兩個路由都渲染同個組件，比起銷毀再創(chuàng)建绩社，復用顯得更加高效摔蓝。
復用組件時，想對路由參數(shù)的變化做出響應的話愉耙，你可以簡單的watch(檢測變化) $route對象
const User = {
template: '...',
watch: {
'$route' (to, from) {
// 對路由變化做出響應
}
}
}
嵌套路由
<router-view>中的組件還可以包含自己的<router-view>在線例子
嵌套路由
上圖中的嵌套結(jié)構(gòu)如下所示贮尉，B1和B2就是B的子結(jié)構(gòu)，在路由中通過children配置朴沿。
- A
| --- B
| | ------B1
| | ------B2
| --- C
編程式導航
導航的兩種方式
- <router-link>創(chuàng)建a標簽
- router的實例方法
| 方法 | 功能 |
|---|---|
| router.push(location) | 向history棧添加新的記錄 |
| router.replace(location) | 替換當前的history記錄 |
| router.go(n) | 在history記錄中向前后者后退多少步 |
命名路由
通過名稱標識路由猜谚。
創(chuàng)建Router實例的時候，在routes配置中給某個路由設置名稱(name)赌渣。
命名視圖
界面中可以擁有多個單獨命名的視圖龄毡，而不是只有一個單獨的出口(<router-view>)
如果router-view沒有設置名字，那么默認為default锡垄。
進階
導航鉤子
導航表示路由正在發(fā)生改變。vue-router提供的導航鉤子主要用來攔截導航祭隔，讓它完成跳轉(zhuǎn)或取消货岭。
全局鉤子
| 鉤子 | 用法 |
|---|---|
| router.beforeEach() | 導航之前調(diào)用 |
| router.afterEach() | 導航之后調(diào)用，不能改變導航 |
路由獨享的鉤子
| 鉤子 | 用法 |
|---|---|
| router.beforeEnter() | 進入此導航 |
組件內(nèi)的鉤子
| 鉤子 | 用法 |
|---|---|
| router.beforeRouteEnter() | 在渲染該組件的對應路由被confirm前調(diào)用疾渴。 不能獲取組件實例this千贯，因為當鉤子執(zhí)行前，組件實例還沒被創(chuàng)建 |
| router.beforeRouteUpdate() | 在當前路由改變搞坝，但是該組件被復用時調(diào)用搔谴。 |
| router.beforeRouteLeave() | 導航離開該組件的對應路由時調(diào)用。 |
路由元信息
定義路由的時候可以配置meta字段
通過$route.matched數(shù)組來檢查路由記錄中的meta字段桩撮。
to.matched.some()
過渡動效
所有路由
<transition>
<router-view></router-view>
</transition>
單個路由
在路由組件內(nèi)使用<transition>并設置不同的name
基于路由的動態(tài)過渡
