1 什么是路由守卫
路由守卫就是路由跳转过程中的一些钩子函数 ,在路由跳转的时候,做一些判断或其它的操作。 类似于组件生命周期钩子函数 。
2 分类
路由守卫主要分为三大类,一共有七个钩子函数,每个守卫有三个参数(afterEach没有next)
1.全局路由守卫
beforeEach(to, from, next) 全局前置守卫,路由跳转前触发
beforeResolve(to, from, next) 全局解析守卫 在所有组件内守卫和异步路由组件被解析之后触发
afterEach(to, from) 全局后置守卫,路由跳转完成后触发
2.路由独享守卫
beforeEnter(to,from,next) 路由对象单个路由配置 ,单个路由进入前触发
3.组件路由守卫
beforeRouteEnter(to,from,next) 在组件生命周期beforeCreate阶段触发
beforeRouteUpdadte(to,from,next) 当前路由改变时触发
beforeRouteLeave(to,from,next) 导航离开该组件的对应路由时触发
4.参数
to: 即将要进入的目标路由对象
from: 即将要离开的路由对象
next(Function):是否可以进入某个具体路由,或者是某个具体路由的路径
3.详解
1.全局前置守卫
在路由跳转前触发,在实际项目中应用最多,主要是登陆验证和跳转权限判断
const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
// ...
})
2.全局解析守卫
类似于路由前置守卫 beforeEach(to, from, next),也是路由跳转前触发,但它是同时在所有组件内守卫和异步路由组件被解析之后触发的
调用时机:在 beforeEach(to, from, next)和组件内beforeRouteEnter(to, from, next)之后,afterEach(to, from)之前调用
beforeResolve(to, from, next)
router.beforeResolve((to, from, next) => {
// ...
})
3.全局后置守卫
于路由前置守卫 beforeEach(to, from, next)相对,路由跳转后触发,但它是同时在所有组件内守卫和异步路由组件被解析之后触发的
调用时机:在 beforeEach(to, from, next)和组件内beforeResolve (to, from, next)之后, beforeRouteEnter(to, from)之前调用
afterEach(to, from, next)
router.afterEach((to, from) => {
// ...
})
4. 路由独享守卫
于路由前置守卫 beforeEach(to, from, next)相同,但在beforeEach(to, from, next)后触发
beforeEnter(to, from, next)
const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => {
// ...
}
}
]
})
5. 组件前置路由守卫
因为该守卫在组件创建之前阶段触发,那个时候组件还没有创建成功,所以这个守卫内不能使用this获取组件实例
调用时机:在全局守卫beforeEach(to, from, next)和独享守卫beforeEnter(to, from, next)之后,全局beforeResolve(to, from, next)和全局afterEach(to, from)之前调用
beforeRouteEnter(to, from, next)
const Foo = {
template: `...`,
beforeRouteEnter(to, from, next) {
// 不能获取组件实例
// 因为当守卫执行前,组件实例还没被创建
}
6. 组件路由守卫
调用时机:在当前路由复用时
beforeRouteUpdate(to, from, next)
beforeRouteUpdate(to, from, next) {
// 在当前路由改变,但是该组件被复用时调用
// 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候,
// 由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
// 可以访问组件实例
},
7. 组件后置路由守卫
通常用来禁止用户在还未保存修改前突然离开
调用时机:导航离开该组件的对应路由时调用
beforeRouteLeave(to, from, next)
beforeRouteLeave(to, from, next) {
// 导航离开该组件的对应路由时调用
// 可以访问组件实例
}
}
4.完整的导航解析流程
1.触发进入其它路由
2.调用要离开路由的组件守卫beforeRouteLeave
3.调用全局的前置守卫beforeEach
4.在重用的组件里调用 beforeRouteUpdate
5.在路由配置里的单条路由调用 beforeEnter
6.解析异步路由组件
7.在将要进入的路由组件中调用beforeRouteEnter
8.调用全局的解析守卫beforeResolve
9.导航被确认
10.调用全局的后置钩子afterEach
11.触发 DOM 更新mounted
12.执行beforeRouteEnter守卫中传给 next的回调函数
举例:
import { useUserStore } from '@/stores'
// 访问权限控制
router.beforeEach((to) => {
NProgress.start()
// 用户仓库
const store = useUserStore()
// 不需要登录的页面,白名单
const wihteList = ['/login', '/login/callback']
// 如果没有登录且不在白名单内,去登录
if (!store.user?.token && !wihteList.includes(to.path)) return '/login'
// 否则不做任何处理
})
注意:
vue-router4.0中表示将会取消next的使用,所以官方不建议使用next(),但是现在依然可以使用next来进行放行和跳转,如next()或next(‘/login’),所以现在建议使用return ‘/login’来进行跳转。而路由白名单的变量名是自定义的,只是表示该变量下的路径没有token限制也可登录。