Vue Router
Vue Router 是Vue.js官方的路由管理器。它和Vue.js的核心深度集成，让构建单页面应用变得易如反掌
功能：
- 嵌套路由/视图表
- 模块化的、基于组件的路由配置
- 路由参数、查询、通配符
- 基于Vue.js过渡系统的视图过渡效果
- 细粒度的导航控制
- 自带自动激活的CSS class 的链接
- HTML5历史模式或hash模式，在IE9中自动降级
- 自定义的滚动条行为
<router-link>
<router-link> 组件支持用户具有路由功能的应用中（点击导航），通过to属性指定目标地址，默认渲染成带有正确链接的<a>标签, 可以通过配置tag属性生成别的标签。当目标路由被成功激活时，链接元素上会自动设置一个表示激活的css类名。 既：router-link-active
| 属性 | 描述 | 默认值 | 类型 |
|---|---|---|---|
| to | 表示目标路由的链接。被点击后，内部会立刻把 to 的值传到router.push()，可为字符串/描述目标位置的对象 | required | string/Location |
| replace | 设置replace属性，当点击时就会调用router.replace() 而不是router.push(),导航不会留下history记录 | 默认值false | boolean |
| append | 设置append属性后，则在当前（相对）路径钱添加基路径。例：我们从/a导航到一个相对路径b，如果没有配置append,则路径为/b 如果配了则为/a/b | false | boolean |
| tag | 将router-link渲染成其他标签，修改tag属性 | a | string |
| active-class | 设置链接激活时使用的CSS类名。默认值可以通过路由的构造选型linkActiveClass来全局配置 | router-link-active | string |
| exact | 是否激活默认类目得依据是包含匹配 | false | boolean |
| exact-active-class | 配置当链接被精确匹配得时候应该激活得class。注意默认值也是可以通过路由构造函数选项linkExactActiveClass | router-link-exact-active | string |
| event | 声明可以用来触发导航得事件，可以是一个字符串或者是一个包含字符串得数组 | click | string/Array(string) |
<router-view>
<router-view>组件是一个functional组件，渲染路径匹配到得视图组件，<router-view> 渲染得组件还可以内嵌自己得<router-view>根据嵌套路径，渲染嵌套组件。
其他属性（非router-view使用得属性）都直接传给渲染的组件，很多时候，每个路由的数据都是包含在路由参数中的。因为它也是个组件，所以可以配合 <transition> 和 <keep-alive> 使用。如果两个结合一起用，要确保在内层使用 <keep-alive>
| 属性 | 描述 | 默认值 | 类型 |
|---|---|---|---|
| name | 如果router-view设置了名称，则会渲染对呀的路由配置中components下的响应组件 | default | string |
Router 构建选项
| 属性 | 描述 | 默认值 | 类型 |
|---|---|---|---|
| routes | Array<RouteConfig> | ||
| mode | 配置路由模式 | 'hash' (浏览器环境) / 'abstract' (nodejs环境) 可选值（hash / history / abstract） | string |
| base | 应用的基路径。 例如，如果整个单页应用服务在 /app/ 下，然后 base 就应该设为 "/app/" | '/' | string |
| linkActiveClass | 全局配置router-link默认激活的class | router-link-active | string |
| linkExactActiveClass | 全局配置router-link默认的精确激活的class | router-link-exact-active | string |
| scrollBehavior | 滚动行为 | function | |
| parseQuery/stringifyQuery | 提供自定义查询字符串的解析/反解析函数。覆盖默认行为 | function | |
| fallback | 当浏览器不支持history.pushState控制路由是否应该回退到hash模式。 | true | boolean |
routes:
Router实例属性
| 属性 | 描述 | 类型 |
|---|---|---|
| router.app | 配置了router的Vue根实例 | Vue instance |
| router.mode | 路由使用的模式 | string |
| router.currenRoute | d当前路由对应的路由信息对象 | Route |
| router.START_LOCATION | 以路由对象的格式展示初始路由地址，即路由开始的地方。可用在导航守卫中以区分初始导航。 | Route |
START_LOCATION
Router实例方法
router.beforeEach
router.beforeResolve
router.afterEach
函数签名
router.push
router.replace
router.go
router.back
router.forword
函数签名
这些函数仅在安装路由插件并将其传递给 Vue 根实例后调用
router.getMatchedComponents
函数签名
返回目标位置或是当前路由匹配的组件数组 (是数组的定义/构造类，不是实例)。通常在服务端渲染的数据预加载时使用。
router.resolve
函数签名
解析目标位置（格式和router-link 的to prop一样）
- current 是当前默认的路由（通常不需要改变它）
- append 允许你在current路由上附近路径
router.addRoute
添加一条新路由规则。如果该路由规则有name,并且已经存在一个与之相同的名字，则会覆盖它
函数签名
添加一条新的路由规则记录作为现有路由的子路由。如果该路由规则有name,并且已经存在与之相同的名字，则会覆盖它。
函数签名
router.getRoutes
获取所有活跃的路由记录列表。注意只有文档中记录下来得property才被视为公共API,避免使用任何其他property，在vue router 4中它不存在
函数签名
router.onReady
该方法把一个回调排队，在路由完成初始导航时调用，这意味着它可以解析所有的异步钩子和路由初始化相关联的异步组件。 可以有效确保服务端渲染时服务端和客户端输出的一致。 第二个参数errorCallback只在2.4+ 支持，它会初始化路由解析运行错误（比如解析一个异步组件失败）时被调用
函数签名
router.onError
注册一个回调，该回调会在路由导航过程中出错时被调用，调用错误必须是下面的一种：
- 错误在一个路由守卫函数中被同步抛出
- 错误在一个路由守卫函数中通过调用next(err)的方式异步捕获并处理
- 渲染一个路由过程中，需要尝试解析一个异步组件时发生错误
函数签名
路由对象
一个路由对象（route object）表示当前激活的路由的状态信息，包含了当前URL解析得到的信息，还有URL匹配到的路由记录。 路由对象是不可变得，每次成功的导航后都会产生一个新的对象 路由对象出现最多的地方：
- 在组件内，即this.$route
- 在$route 观察者回调内
- router.match(localtion)的返回值
- 导航守卫函数
- scrrllBehavior方法的参数
路由对象属性
| 属性 | 描述 | 类型 |
|---|---|---|
| $route.path | 对应当前路由的路径。总是解析为绝对路径 | string |
| $route.params | 一个key/value对象，包含了动态片段和全匹配片段，如果没有路由参数，就是一个空对象 | object |
| $route.query | 一个key/value对象，表示URL查询参数，如果没有查询参数吗，则为空对象 | object |
| $route.hash | 当前路由的hash值（带#）,如果没有hash值，则为空字符串 | string |
| $route.fullPath | 完成解析后的URL，包含查询参数和hash的完整路径 | string |
| $route.matched | 一个数组，包含当前路由的所有嵌套路径片段的路由记录，路由记录就是routes配置数组中的对象副本 | Array |
| $route.name | 当前路由的名称，如果有的话 | |
| $route.redirectedForm | 如果存在重定向，即为重定向来源的路由的名字 | string |
$route.matched
当 URL 为 /foo/bar，$route.matched 将会是一个包含从上到下的所有对象 (副本)。
组件注入
注入的属性
通过在Vue根实例的router配置传入router实例，下面这些属性成员会被注入到每个子组件
-
this.$router
route实例 -
this.$route
当前激活的路由信息对象。这个属性是只读的，里面的属性是（immutable）不可变的, 可以通过watch（监测变化）它
导航守卫
全局前置守卫
使用 router.beforeEach 注册一个全局前置守卫 当一个导航触发时，全局前置守卫按照创建顺序调用。守卫是异步解析执行，此时导航在所有守卫resolve之前一直处于等待中 每个守卫方法接受三个参数
- to: Route：即将要进入的目标路由对象
- form: Route：当前导航正在离开的路由
- next: Function：一定要调用这个方法来resove这个钩子。执行效果依赖next方法的调用参数
全局解析守卫
2.5.0+使用router.beforeResolve注册一个全局守卫，这个router.beforeEach类似，区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫被调用。
全局后置钩子
通过router.afterEach注册全局后置钩子，和守卫不同的是，这些钩子不会接受next函数也不会改变导航本身
路由独享的守卫
在路由配置上直接定义beforeEnter守卫，这些守卫与全局前置守卫的方法参数是一样的
组件内的守卫
- beforeRouteEnter
- beforeRouteUpdate（2.2新增）
- beforeRouteLeave
beforeRouteEnter守卫不能访问this,因为守卫在导航确认前被调用，因此即将登场的新组件还有被创建。可以通过一个回调给next来访问组件实例。在导航被确认的时候执行回调，并且把组件实例做完回调方法的参数
注意beforeRouteEnter是支持给next传递回调的唯一守卫，对于beforeRouteUpdate和beforeRouteLeave来说，this已经可用了，所以不支持传递回调，没有必要。
这个离开守卫通常用来禁止用户还在未保护修改前突然离开，该导航可以通过next(false)来取消
完整的导航解析流程
- 导航被触发
- 在失活的组件里调用beforeRouteLeave守卫
- 调用全局的beforeEach守卫
- 在重用的组件里调用beforeRouteUpdate守卫（2.2+）
- 在路由配置里调用beforeEnter
- 解析异步路由组件
- 在被激活的组件里调用beforeRouteEnter
- 调用全局的beforeResolve守卫（2.5+）
- 导航被确认
- 调用全局afterEach钩子
- 触发DOM更新
- 调用beforeRouteEnter守卫中传给next的回调函数，创建好的组件实例会作为回调函数的参数传入。
