vue如何实现路由守卫
路由守卫的实现方式
Vue Router 提供了多种路由守卫（Navigation Guards）来控制路由跳转，可以在全局、路由独享或组件内进行设置。以下是常见的实现方法：
全局前置守卫（beforeEach）
在路由跳转前进行权限验证或全局处理：
router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.requiresAuth)) {
if (!auth.isLoggedIn()) {
next({ path: '/login' })
} else {
next()
}
} else {
next()
}
})全局解析守卫（beforeResolve）
在导航被确认前触发，适合等待异步数据加载：
router.beforeResolve(async (to, from, next) => {
try {
await fetchDataBeforeEnter(to)
next()
} catch (error) {
next('/error')
}
})全局后置钩子（afterEach）
导航完成后执行，适合日志记录或页面滚动复位：
router.afterEach((to, from) => {
logPageView(to.fullPath)
window.scrollTo(0, 0)
})路由独享守卫（beforeEnter）
在路由配置中直接定义守卫：
const routes = [
{
path: '/admin',
component: AdminPanel,
beforeEnter: (to, from, next) => {
if (!user.isAdmin) next('/forbidden')
else next()
}
}
]组件内守卫
在组件内部定义特定生命周期钩子：
export default {
beforeRouteEnter(to, from, next) {
// 不能访问组件实例 `this`
next(vm => {
// 通过回调参数访问实例
})
},
beforeRouteUpdate(to, from, next) {
// 当前路由改变但组件复用时调用
this.fetchData(to.params.id)
next()
},
beforeRouteLeave(to, from, next) {
if (this.hasUnsavedChanges) {
if (confirm('确定离开?')) next()
else next(false)
} else next()
}
}完整的守卫解析流程
- 导航触发
- 调用离开组件的
beforeRouteLeave - 调用全局的
beforeEach - 在重用的组件里调用
beforeRouteUpdate - 调用路由配置里的
beforeEnter - 解析异步路由组件
- 在激活的组件里调用
beforeRouteEnter - 调用全局的
beforeResolve - 导航被确认
- 调用全局的
afterEach - 触发 DOM 更新
- 调用
beforeRouteEnter中传给next的回调函数
注意事项
- 守卫函数必须调用
next()来继续导航流程 next(false)中断当前导航next('/path')或next({ path: '/' })可重定向- 在
beforeRouteEnter中无法访问组件实例 - 异步操作应使用
async/await或返回 Promise
这些守卫可以组合使用来实现复杂的路由控制逻辑，如权限验证、数据预加载、表单保护等场景。
