vue实现路由拦截
路由拦截的实现方式
在Vue中，可以通过Vue Router的导航守卫（Navigation Guards）实现路由拦截。导航守卫分为全局守卫、路由独享守卫和组件内守卫三种类型。
全局前置守卫
使用router.beforeEach注册全局前置守卫，在路由跳转前进行拦截。常用于权限验证、登录状态检查等场景。
router.beforeEach((to, from, next) => {
const isAuthenticated = checkAuth() // 检查用户是否登录
if (to.meta.requiresAuth && !isAuthenticated) {
next('/login') // 跳转到登录页
} else {
next() // 放行
}
})路由独享守卫
在路由配置中直接定义beforeEnter守卫，仅对该路由生效。
const routes = [
{
path: '/admin',
component: Admin,
beforeEnter: (to, from, next) => {
if (!isAdmin()) {
next('/forbidden') // 非管理员跳转
} else {
next()
}
}
}
]组件内守卫
在组件内部使用beforeRouteEnter、beforeRouteUpdate和beforeRouteLeave守卫。
export default {
beforeRouteEnter(to, from, next) {
// 组件实例还未创建，不能访问this
next(vm => {
// 通过vm访问组件实例
})
},
beforeRouteLeave(to, from, next) {
// 离开路由前的确认
if (confirm('确定要离开吗？')) {
next()
} else {
next(false)
}
}
}元信息与权限控制
利用路由的meta字段存储权限信息，结合导航守卫实现精细控制。
const routes = [
{
path: '/dashboard',
component: Dashboard,
meta: { requiresAuth: true, roles: ['admin', 'user'] }
}
]
router.beforeEach((to, from, next) => {
const userRole = getUserRole()
if (to.meta.roles && !to.meta.roles.includes(userRole)) {
next('/unauthorized')
} else {
next()
}
})异步路由与拦截
对于动态加载的路由，可以在路由配置完成后添加全局守卫。
router.beforeResolve(async to => {
if (to.meta.requiresAsyncData) {
await fetchAsyncData()
}
})错误处理
通过router.onError捕获路由导航过程中的错误。
router.onError(error => {
console.error('路由错误:', error)
// 跳转到错误页面
})通过合理组合这些守卫和元信息，可以实现复杂的路由拦截逻辑，满足各种权限控制和导航管理的需求。
