路由钩子函数
1全局路由守卫
一般在main.js中设置全局导航守卫,所有路由都会经过
全局前置守卫beforeEach
全局后置守卫afterEach()
router.beforeEach((to,from,next)=>{
next() //决定页面是否继续向下走 next(true);
});
2.组件路由守卫
跟 methods: {}等同级别书写,组件路由守卫是写在每个单独的 vue 文件里面的路由守卫
beforeRouteEnter (to, from, next) {
// 注意,在路由进入之前,组件实例还未渲染,所以无法获取 this 实例,只能通过 vm 来访问组件实例
next(vm => {})
}
beforeRouteUpdate (to, from, next) {
// 同一页面,刷新不同数据时调用,
}
beforeRouteLeave (to, from, next) {
// 离开当前路由页面时调用
}
3.路由独享守卫
router.js(路由页面)中定义 {
path: "nxp",
name: 'nxp',
beforeEnter(to,from,next){ next(); }
}
执行顺序:
1.导航被触发
2.在失活的组件里调用离开守卫
3.调用全局的beforeEach守卫
4.在重用的组件里调用boforeRouteUpdate守卫
5.在路由配置里调用beforeEnter
6.解析异步路由组件
7.在被激活的组件里调用beforeRouteEnter
8.调用全局的beforeResolve守卫
9.导航被确认
10.调用全局的afterEach钩子
11.触发DOM更新
12用创建好的实例调用 beforeRouteEnter 守卫中传给next的回调函数