一、概述 Vue 路由守卫是 Vue Router 提供的一种机制，用于在路由导航过程中对路由进行控制和过滤。通过使用路由守卫，我们可以在路由跳转前、跳转后以及跳转过程中执行一些自定义的逻辑。
二、路由守卫的类型 Vue 路由守卫主要分为全局守卫、路由独享守卫和组件内守卫三种类型。
- 全局守卫 全局守卫会在路由导航的每个阶段都被调用，包括路由跳转前、跳转后以及跳转过程中。
- beforeEach(to, from, next) 在路由跳转前被调用，可以用于进行权限验证、登录状态判断等操作。to 参数表示即将进入的路由对象，from 参数表示当前导航正要离开的路由对象，next 函数用于进行路由的跳转。
- afterEach(to, from) 在路由跳转后被调用，可以用于进行页面统计、日志记录等操作。to 参数表示即将进入的路由对象，from 参数表示当前导航正要离开的路由对象。
- 路由独享守卫 路由独享守卫只会在特定的路由上被调用。
- beforeEnter(to, from, next) 在路由进入前被调用，可以用于进行特定路由的权限验证、登录状态判断等操作。to 参数表示即将进入的路由对象，from 参数表示当前导航正要离开的路由对象，next 函数用于进行路由的跳转。
- 组件内守卫 组件内守卫只会在当前组件内被调用。
- beforeRouteEnter(to, from, next) 在路由进入前被调用，可以用于进行当前组件的初始化操作。to 参数表示即将进入的路由对象，from 参数表示当前导航正要离开的路由对象，next 函数用于进行路由的跳转。
- beforeRouteUpdate(to, from, next) 在当前路由改变，但是当前组件被复用时被调用。to 参数表示即将进入的路由对象，from 参数表示当前导航正要离开的路由对象，next 函数用于进行路由的跳转。
- beforeRouteLeave(to, from, next) 在路由离开前被调用，可以用于进行当前组件的销毁操作。to 参数表示即将进入的路由对象，from 参数表示当前导航正要离开的路由对象，next 函数用于进行路由的跳转。
三、使用示例
- 全局守卫
router.beforeEach((to, from, next) => {
// 权限验证、登录状态判断等操作
if (to.meta.requireAuth && !isAuthenticated()) {
next('/login');
} else {
next();
}
});
router.afterEach((to, from) => {
// 页面统计、日志记录等操作
});- 路由独享守卫
const router = new VueRouter({
routes: [
{
path: '/admin',
component: Admin,
beforeEnter: (to, from, next) => {
// 权限验证、登录状态判断等操作
if (to.meta.requireAuth && !isAuthenticated()) {
next('/login');
} else {
next();
}
}
}
]
});- 组件内守卫
export default {
beforeRouteEnter(to, from, next) {
// 初始化操作
fetchData().then(data => {
next(vm => {
vm.data = data;
});
});
},
beforeRouteUpdate(to, from, next) {
// 组件被复用时的操作
fetchData().then(data => {
this.data = data;
next();
});
},
beforeRouteLeave(to, from, next) {
// 组件销毁操作
saveData(this.data).then(() => {
next();
});
}
}Vue 路由守卫可以在路由导航过程中对路由进行控制和过滤，实现权限验证、登录状态判断、页面统计、日志记录等功能。根据需要选择合适的守卫类型，并在相应的回调函数中编写自定义逻辑，从而实现更加灵活和可控的路由跳转。
