如何实现Vue路由拦截 - vue学习-微参考

Vue.js 是目前非常流行的前端框架之一，它的路由管理器 Vue Router 也是项目中不可或缺的部分。在实际开发中，我们经常需要对路由进行拦截，以实现诸如权限验证、页面访问控制等功能。在 Vue Router 中，主要通过导航守卫（Navigation Guards）来实现路由拦截。

全局前置守卫

全局前置守卫会在路由跳转之前被调用，它提供了对路由进行拦截的机会。

const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
// 可以在这里进行权限验证等逻辑
// to: 即将要进入的目标路由对象
// from: 当前导航正要离开的路由
// next: 是一个函数，必须调用它来 resolve 这个钩子

// 放行
next();

// 或者有条件地放行
// next('/login'); // 跳转到登录页
});

全局后置守卫

全局后置守卫会在路由跳转之后被调用，通常用于分析、改变页面标题等操作。

router.afterEach((to, from) => {
// 可以在这里设置页面标题
document.title = to.meta.title || '默认标题';
});

如何实现Vue路由拦截

路由独享的守卫

如果你只想在某个路由上应用守卫，可以在路由配置上直接定义。

const router = new VueRouter({
routes: [
{
path: '/protected',
component: ProtectedComponent,
beforeEnter: (to, from, next) => {
// 这里可以对 '/protected' 进行单独的权限验证
next();
}
}
]
});

组件内的守卫

在组件内，我们也可以使用 `beforeRouteEnter`、`beforeRouteUpdate` 和 `beforeRouteLeave` 这三个守卫。

export default {
name: 'ComponentName',
beforeRouteEnter (to, from, next) {
// 在渲染该组件的对应路由被验证前调用
// 不能获取组件实例 `this`，因为守卫在导航确认前被调用
next();
},
beforeRouteUpdate (to, from, next) {
// 在当前路由改变，但是该组件被复用时调用
// 适用于动态路由
next();
},
beforeRouteLeave (to, from, next) {
// 导航离开该组件的对应路由时调用
// 可以用于保存数据或者提示用户确认离开
next();
}
}