vue如何实现路由拦截
vue 实现路由拦截的方法
Vue 中可以通过路由守卫（Navigation Guards）实现路由拦截，主要分为全局守卫、路由独享守卫和组件内守卫三种方式。
全局前置守卫
使用 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) {
// 组件实例尚未创建，无法访问 `this`
next(vm => {
// 通过 `vm` 访问组件实例
})
},
beforeRouteLeave(to, from, next) {
// 离开路由时触发
const answer = confirm('确定离开吗？')
if (answer) next()
else next(false)
}
}拦截逻辑常见场景
登录验证
检查用户是否登录，未登录则跳转到登录页。
router.beforeEach((to, from, next) => {
const isPublic = to.matched.some(record => record.meta.public)
const loggedIn = localStorage.getItem('user')
if (!isPublic && !loggedIn) {
return next('/login')
}
next()
})权限控制
根据用户角色限制访问权限。
router.beforeEach((to, from, next) => {
const requiredRole = to.meta.role
const userRole = getUserRole()
if (requiredRole && userRole !== requiredRole) {
next('/forbidden')
} else {
next()
}
})页面离开确认
防止用户误操作导致数据丢失。
beforeRouteLeave(to, from, next) {
if (this.formChanged) {
if (confirm('未保存的更改将丢失，确定离开？')) {
next()
} else {
next(false)
}
} else {
next()
}
}注意事项
- 确保始终调用
next()，否则路由会卡住 - 异步操作需在完成后再调用
next() - 组件内守卫无法访问
this时，可通过next(vm => {})回调获取实例
通过合理组合这些守卫，可以实现复杂的路由拦截逻辑，满足各种业务场景需求。
