Vue Router 进阶实战
深入使用
导航守卫
在实际开发中,我们往往需要在路由跳转前或跳转后执行一些逻辑,比如权限验证、登录拦截或者埋点统计。Vue Router 提供了多种守卫机制来实现这些需求。
核心参数说明
- to: 即将进入的目标路由对象。
- from: 当前导航正要离开的路由对象。
- next: 控制路由跳转的函数。
next(): 继续执行路由。next(false): 中断当前导航,如果浏览器 URL 已改变,会回退到 from 路由。next('/path'): 跳转到指定路径。next(error): 将控制权交给router.onError()。
组件内守卫
适用于特定组件的生命周期控制,例如在用户离开某个页面时提示保存数据。
export default {
beforeRouteEnter(to, from, next) {
// 在路由进入前调用,此时组件实例尚未创建
next();
},
beforeRouteUpdate(to, from, next) {
// 在当前路由改变但组件被复用时调用
next();
},
beforeRouteLeave(to, from, next) {
// 在路由离开前调用
next();
}
};
路由独享守卫
直接定义在路由配置中,适合针对特定路径的逻辑处理。
const routes = [
{
path: '/admin',
component: Admin,
beforeEnter: (to, from, next) => {
// 仅管理员可访问
if (isAdmin()) {
next();
} else {
();
}
}
}
];


