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 的回调函数。
导航守卫的作用有很多,比如实现登陆拦截,组件渲染拦截等