首先解释下什么是路由守卫？路由守卫是Vue Router提供的一种机制，用于在导航过程中对路由进行操作和管理，通过路由守卫你可以在路由跳转前、路由跳转后、或者跳转失败的过程中去处理相应的逻辑。vue中的路由守卫有三种：全局守卫、私有守卫、组件内守卫，今天大概说下这三种路由守卫。
1.全局守卫
- 全局前置守卫
全局前置守卫会在路由跳转前被调用，可以使用router.beforeEach注册。
const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
// ...
})to: 即将进入的目标路由对象
from: 当前导航正要离开的路由
next: 用于控制导航行为的回调函数
在守卫的回调函数中，你可以根据业务需求执行相应的操作，如验证用户权限、检查登录状态、取消导航或重定向到其他路由。next函数用于控制导航的继续或中断。
若要中断当前导航并取消跳转，可以调用next(false)
若要重定向到其他路由，并且希望中断当前导航，可以调用next('other-route')
若无需中断导航，则调用next()
前置守卫的使用场景：
1.登录验证
2.权限控制
3.路由拦截
4.数据预处理
.........
- 全局后置守卫
全局后置守卫会在路由跳转后被调用，可以使用router.afterEach注册。
router.afterEach((to, from) => {
// ...
})to: 即将进入的目标路由对象
from: 当前导航正要离开的路由
2.私有守卫
私有守卫是在路由配置里配置的，只针对当前路由或者子路由生效。可以使用beforeEnter()注册。
const router = new VueRouter({
routes: [
{
path: '/path',
component: MyComponent,
beforeEnter: (to, from, next) => {
// ...
}
}
]
})使用场景：
1.鉴权和权限控制
2.数据加载和处理
3.导航控制
4.数据埋点或日志记录
3.组件内守卫
组件内的守卫：这些守卫是直接写在组件内部的方法，用于对组件内部的路由变化做出反应。常见的组件内守卫有beforeRouteEnter、beforeRouteUpdate和beforeRouteLeave。
export default {
//...
beforeRouteEnter: (to, from, next) => {
// 在组件实例创建之前调用
// 可以使用回调函数或返回一个Promise延迟进入
},
beforeRouteLeave: (to, from, next) => {
// 在离开当前路由时调用
// 可以进行确认、保存数据等操作
}
beforeRouteUpdate: (to, from, next) => {
// 在当前路由被复用时调用
// 可以对参数的变化作出响应
}
}
