vue中的导航守卫分为三种
- 全局守卫
- 路由独享
- 组件内
1、全局守卫
一般放在main.js中
beforeEach
每一次进入路由,不管什么路由,都要守卫一次
router.beforeEach((to, from, next) => {
console.log("beforeEach");
next();
})
beforeResolve
当路由内部全都解析完成以后才去执行
router.beforeResolve((to, from, next) => {
console.log("beforeResolve");
next();
})
afterEach
所有内容全部解析完成以后执行
router.afterEach((to, from, next) => {
console.log("afterEach");
})
2、路由独享
一般放在router的index.js中
beforeEnter
export default new VueRouter({
mode: "history", // 配置成为历史模式
linkExactActiveClass: "exact-avtive",
linkActiveClass: "avtive",
routes: [{
path: '/home',
name: 'Home',
component: Home,
beforeEnter(to, from, next) {
console.log("beforeEnter");
next();
},
}],
})
3、组件内
写在任意组件中
beforeRouteEnter
进入路由时执行
beforeRouteEnter(to, from, next) {
console.log("beforeRouteEnter");
next();
}
beforeRouteLeave
离开当前路由之前执行
beforeRouteLeave(to, from, next) {
console.log("beforeRouteLeave");
next();
}
beforeRouteUpdate
数据更新时执行
beforeRouteUpdate(to, from, next) {
console.log("beforeRouteUpdate");
next();
}
完整的导航解析流程
以上七个钩子函数全部写上之后,执行vue页面,输出如下
第一次导航解析的页面,7个钩子函数全部配置好了,但是第二个路由中,由于只配置了全局守卫,故只有3个输出。
基于此结果,不难发现完整的导航解析流程,如下
- beforeEach(全局守卫) ↓
- beforeEnter(路由独享守卫) ↓
- beforeRouteEnter(组件内守卫) ↓
- beforeResolve(全局守卫 - 解析) ↓
- afterEach(全局守卫 - 解析完成) ↓
- beforeRouteEnter(组件内守卫,传递next) ↓
- beforeRouteUpdate(组件内守卫,当数据更新时,)