配置
如果在一个模块化工程中使用它，必须要通过Vue.use()明确地安装路由功能：
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
基础
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，要调用 Vue.use(VueRouter)
// 1. 定义（路由）组件。
// 可以从其他文件 import 进来
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 或者，只是一个组件配置对象。
const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
]
// 3. 创建 router 实例，然后传 `routes` 配置
const router = new VueRouter({
routes // （缩写）相当于 routes: routes
})
// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
const app = new Vue({
router
}).$mount('#app')
// 现在，应用已经启动了！
动态路由匹配
通俗的讲就是，路径中包含参数，而对应的组件是一定的。在线例子
响应路由参数的变化
当使用路由参数时，原来的组件实例会被复用，组件的生命周期钩子不会再被调用。
因为两个路由都渲染同个组件，比起销毁再创建，复用显得更加高效。
复用组件时，想对路由参数的变化做出响应的话，你可以简单的watch(检测变化) $route对象
const User = {
template: '...',
watch: {
'$route' (to, from) {
// 对路由变化做出响应
}
}
}
嵌套路由
<router-view>中的组件还可以包含自己的<router-view>在线例子
嵌套路由
上图中的嵌套结构如下所示，B1和B2就是B的子结构，在路由中通过children配置。
- A
| --- B
| | ------B1
| | ------B2
| --- C
编程式导航
导航的两种方式
- <router-link>创建a标签
- router的实例方法
| 方法 | 功能 |
|---|---|
| router.push(location) | 向history栈添加新的记录 |
| router.replace(location) | 替换当前的history记录 |
| router.go(n) | 在history记录中向前后者后退多少步 |
命名路由
通过名称标识路由。
创建Router实例的时候，在routes配置中给某个路由设置名称(name)。
命名视图
界面中可以拥有多个单独命名的视图，而不是只有一个单独的出口(<router-view>)
如果router-view没有设置名字，那么默认为default。
进阶
导航钩子
导航表示路由正在发生改变。vue-router提供的导航钩子主要用来拦截导航，让它完成跳转或取消。
全局钩子
| 钩子 | 用法 |
|---|---|
| router.beforeEach() | 导航之前调用 |
| router.afterEach() | 导航之后调用，不能改变导航 |
路由独享的钩子
| 钩子 | 用法 |
|---|---|
| router.beforeEnter() | 进入此导航 |
组件内的钩子
| 钩子 | 用法 |
|---|---|
| router.beforeRouteEnter() | 在渲染该组件的对应路由被confirm前调用。 不能获取组件实例this，因为当钩子执行前，组件实例还没被创建 |
| router.beforeRouteUpdate() | 在当前路由改变，但是该组件被复用时调用。 |
| router.beforeRouteLeave() | 导航离开该组件的对应路由时调用。 |
路由元信息
定义路由的时候可以配置meta字段
通过$route.matched数组来检查路由记录中的meta字段。
to.matched.some()
过渡动效
所有路由
<transition>
<router-view></router-view>
</transition>
单个路由
在路由组件内使用<transition>并设置不同的name
基于路由的动态过渡
