vue路由守卫怎么实现
Vue 路由守卫的实现方法
Vue 路由守卫主要通过 Vue Router 提供的钩子函数实现，用于在路由跳转前后执行特定逻辑。以下是常见的路由守卫类型及实现方式：
全局前置守卫 beforeEach
在路由跳转前触发，常用于权限验证或登录检查。
router.beforeEach((to, from, next) => {
if (to.meta.requiresAuth && !isAuthenticated()) {
next('/login'); // 跳转到登录页
} else {
next(); // 放行
}
});- 参数说明：
to：目标路由对象。from：当前路由对象。next：必须调用的函数，决定跳转行为。
全局解析守卫 beforeResolve
在导航被确认前触发，适合处理异步数据获取。
router.beforeResolve(async (to, from, next) => {
try {
await fetchData(); // 异步操作
next();
} catch (error) {
next('/error');
}
});全局后置钩子 afterEach
在路由跳转完成后触发，无 next 参数。
router.afterEach((to, from) => {
logRouteChange(to.path); // 记录路由变化
});路由独享守卫 beforeEnter
在单个路由配置中定义，仅对该路由生效。
const routes = [
{
path: '/admin',
component: Admin,
beforeEnter: (to, from, next) => {
checkAdminRole() ? next() : next('/denied');
}
}
];组件内守卫
在组件内部通过选项或组合式 API 实现。
选项式 API
export default {
beforeRouteEnter(to, from, next) {
// 组件实例未创建，无法访问 `this`
next(vm => {
vm.loadData(); // 通过回调访问实例
});
},
beforeRouteUpdate(to, from, next) {
// 路由变化但组件复用时触发
this.updateData(to.params);
next();
},
beforeRouteLeave(to, from, next) {
// 离开组件前触发
if (hasUnsavedChanges()) {
next(confirm('确定离开？'));
} else {
next();
}
}
};组合式 API
import { onBeforeRouteLeave } from 'vue-router';
setup() {
onBeforeRouteLeave((to, from, next) => {
// 离开守卫逻辑
next();
});
}注意事项
next调用：必须调用next()一次，否则路由会卡住。- 异步支持：守卫可以返回 Promise，支持
async/await。 - 顺序执行：守卫按全局→路由→组件的顺序触发。
通过合理组合这些守卫，可以实现路由权限控制、数据预加载、导航拦截等复杂逻辑。
