路由守卫
全局路由守卫
前置路由守卫
全局前置守卫 (router.beforeEach):
位置:在src/router/index.js文件中配置。
作用:对任何路由跳转(包括首次加载、手动导航、编程式导航)进行统一拦截。
示例代码:
const router = new VueRouter({ /* ... */ });
router.beforeEach((to, from, next) => {
// 检查是否已登录(这里仅作为示例,实际应用中可能涉及更复杂的逻辑)
if (!isAuthenticated) {
// 未登录,重定向到登录页
next('/login');
} else {
// 已登录,允许继续访问目标路由
next();
}
});
后置路由守卫
全局后置钩子 (router.afterEach):
位置:同样在src/router/index.js文件中配置。
作用:在每次路由切换成功后执行,通常用于更新页面标题、埋点统计、页面缓存清理等工作,不涉及阻断路由访问。
示例代码:
router.afterEach((to, from) => {
document.title = to.meta.title || 'Default Title';
// 或者进行其他通用的后处理操作
});
路由独享守卫(beforeEnter)
位置:在定义路由配置对象时,直接在目标路由的配置内设置。
作用:仅对特定路由生效,执行特定的权限检查或其他业务逻辑。
示例代码:
const routes = [
{
path: '/admin',
component: AdminPanel,
beforeEnter: (to, from, next) => {
if (!isAdminUser) {
next('/forbidden');
} else {
next();
}
},
meta: { title: 'Admin Panel' }
},
// 其他路由...
];
组件路由守卫
位置:在路由组件内部编写。
分类:
beforeRouteEnter: 在进入路由前调用,不能访问当前组件实例(this不可用),但可以通过回调函数传递给next方法的数据访问。
beforeRouteUpdate: 路由参数变化时(路径相同而参数不同)调用,可以访问当前组件实例。
beforeRouteLeave: 离开当前路由时调用,可以访问当前组件实例。
示例代码(以beforeRouteEnter为例):
export default {
data() {
return { articleId: null };
},
beforeRouteEnter(to, from, next) {
// 获取文章ID并异步加载数据
fetchArticle(to.params.articleId)
.then(article => {
next(vm => {
// 将数据注入到组件实例
vm.article = article;
});
})
.catch(() => next('/error'));
}
};