vue导航守卫的实现
Vue 导航守卫的实现方法
导航守卫是 Vue Router 提供的一种机制，用于在路由跳转过程中控制访问权限或执行特定逻辑。以下是常见的实现方式：
全局前置守卫
通过 router.beforeEach 注册全局前置守卫，常用于权限验证：
const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
// 检查目标路由是否需要认证
if (to.matched.some(record => record.meta.requiresAuth)) {
if (!isAuthenticated()) {
next({ path: '/login' })
} else {
next()
}
} else {
next()
}
})路由独享守卫
在路由配置中直接定义 beforeEnter 守卫：
const router = new VueRouter({
routes: [
{
path: '/admin',
component: AdminPanel,
beforeEnter: (to, from, next) => {
if (!isAdmin()) next('/')
else next()
}
}
]
})组件内守卫
在组件内部使用以下守卫：
beforeRouteEnterbeforeRouteUpdatebeforeRouteLeave
示例：
export default {
beforeRouteEnter(to, from, next) {
// 注意此时无法访问组件实例
next(vm => {
// 通过回调参数访问实例
})
},
beforeRouteLeave(to, from, next) {
if (unsavedChanges) {
if (confirm('离开后未保存的更改将丢失')) next()
else next(false)
} else next()
}
}全局解析守卫
使用 router.beforeResolve 注册全局守卫，触发时机在导航确认之前：
router.beforeResolve((to, from, next) => {
// 适合处理异步数据获取
next()
})全局后置钩子
使用 router.afterEach 注册全局后置钩子，适合页面分析等场景：
router.afterEach((to, from) => {
sendToAnalytics(to.fullPath)
})注意事项
- 守卫是异步执行的，需要确保调用
next()来 resolve 钩子 - 可以组合使用多个守卫，执行顺序为：全局守卫 → 路由独享守卫 → 组件内守卫
beforeRouteEnter是唯一支持给next传递回调的守卫
