vue如何实现路由拦截
Vue 路由拦截的实现方法
在 Vue 中实现路由拦截主要通过 Vue Router 的导航守卫功能。以下是几种常见的实现方式：
全局前置守卫
使用 router.beforeEach 可以在路由跳转前进行拦截，常用于权限验证或登录状态检查。
const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
if (to.meta.requiresAuth && !isAuthenticated()) {
next('/login')
} else {
next()
}
})路由独享守卫
在路由配置中直接定义 beforeEnter 守卫，仅对该路由生效。
const router = new VueRouter({
routes: [
{
path: '/admin',
component: Admin,
beforeEnter: (to, from, next) => {
if (!isAdmin()) next('/')
else next()
}
}
]
})组件内守卫
在组件内部通过 beforeRouteEnter、beforeRouteUpdate 或 beforeRouteLeave 实现更细粒度的控制。
export default {
beforeRouteEnter(to, from, next) {
// 注意：此时组件实例尚未创建
next(vm => {
// 通过 `vm` 访问组件实例
})
},
beforeRouteLeave(to, from, next) {
const answer = confirm('确定要离开吗？')
if (answer) next()
else next(false)
}
}动态路由权限控制
结合后端返回的权限数据动态生成路由表，实现精细化权限管理。
// 过滤异步路由表
function filterAsyncRoutes(routes, roles) {
const res = []
routes.forEach(route => {
const tmp = { ...route }
if (hasPermission(roles, tmp)) {
if (tmp.children) {
tmp.children = filterAsyncRoutes(tmp.children, roles)
}
res.push(tmp)
}
})
return res
}登录状态检查
常见于需要登录才能访问的页面拦截。
router.beforeEach((to, from, next) => {
const isLogin = localStorage.getItem('token')
if (to.meta.auth && !isLogin) {
next('/login?redirect=' + to.path)
} else {
next()
}
})实现路由拦截时需要注意守卫的执行顺序，避免死循环跳转，合理处理异步逻辑，并考虑用户体验。对于复杂权限系统，建议结合路由元信息（meta）和后端返回的权限数据进行动态路由配置。
