对vue-router以及导航守卫的理解

vue-router是vue框架的一个插件，主要处理路由的跳转，其返回值是一个构造函数，接收一个描述对象作为参数，描述对象有一个必选属性routes——一个由route配置对象组成的数组，其余选项均为可选，具体参考官网API。

route配置对象包括很多选项：

//匹配路由
path: string,

//匹配路由成功时要渲染的组件标识
component?: Component,
// 命名路由，一般配合<keep-alive>使用
name?: string,
// 命名视图组件
components?: { [name: string]: Component },
//重定向
redirect?: string | Location | Function,
//用于解耦，值为true时将$route.pramas挂载到组件实例上；值为Object时，直接将该对象挂载到组件实例上；通过组件的props接收被挂载的对象属性，注意这里传递的props是静态的
props?: boolean | Object | Function,
alias?: string | Array,
// 嵌套路由，接收route配置对象
children?: Array,
//路由独享守卫
beforeEnter?: (to: Route, from: Route, next: Function) => void,
//元数据，会传递到$route对象上
meta?: any

vue-router对象被挂载到Vue对象的原型上后，我们就可以通过$router来访问根路由对象——这个$router是自定义的，在初始化根组件的时候决定。

import Vue from 'vue';
import router from '你的路由文件';
new Vue({
	template: "<div>第三方插件都是可以自定义名字来访问的</div>"
	data: {},
	router, //这里的router可以变更——记得引入的文件命名也要改，不过为了规范，使用router命名最好
	//...
})

它为我们注册了<RouterLink>、<RouterView>、<KeepAlive>等全局组件，以供我们实现路由管理的功能：<KeepAlive>包括两个很重要的属性：include和exclude，可以帮助我们区分需要保存状态的组件和需要重新渲染的组件

导航守卫(钩子函数)有很多，这里列举常用的六个：
进入路由匹配是的两个全局守卫：beforeEach、afterEach
路由匹配成功后的一个路由独享守卫：beforeRouteEnter
要渲染对应组件时的三个组件内置守卫：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave

完整的导航解析流程如下：

1、导航被触发。
2、在失活的组件里调用 beforeRouteLeave 守卫。
3、调用全局的 beforeEach 守卫。
4、在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
5、在路由配置里调用 beforeEnter。
6、解析异步路由组件。
7、在被激活的组件里调用 beforeRouteEnter。
8、调用全局的 beforeResolve 守卫 (2.5+)。
9、导航被确认。
10、调用全局的 afterEach 钩子。
11、触发 DOM 更新。
12、用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。

导航守卫的作用有很多，比如实现登陆拦截，组件渲染拦截等