vue导航守卫实现使用
全局前置守卫（beforeEach）
在 Vue Router 中，beforeEach 是最常用的全局前置守卫。它在路由跳转前触发，适用于权限验证、登录状态检查等场景。
const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
// to: 即将进入的目标路由对象
// from: 当前导航正要离开的路由
// next: 必须调用该方法来 resolve 这个钩子
if (to.meta.requiresAuth && !isAuthenticated()) {
next('/login')
} else {
next()
}
})路由独享守卫（beforeEnter）
可以在路由配置中直接定义 beforeEnter 守卫，仅对该路由生效。
const router = new VueRouter({
routes: [
{
path: '/admin',
component: Admin,
beforeEnter: (to, from, next) => {
if (!checkAdminRole()) {
next('/forbidden')
} else {
next()
}
}
}
]
})组件内守卫
Vue 组件内可以定义以下导航守卫：
beforeRouteEnterbeforeRouteUpdatebeforeRouteLeave
export default {
beforeRouteEnter(to, from, next) {
// 不能访问组件实例 `this`
next(vm => {
// 通过 `vm` 访问组件实例
})
},
beforeRouteUpdate(to, from, next) {
// 当前路由改变但组件被复用时调用
this.name = to.params.name
next()
},
beforeRouteLeave(to, from, next) {
if (this.hasUnsavedChanges) {
if (confirm('有未保存的更改，确定离开?')) {
next()
} else {
next(false)
}
} else {
next()
}
}
}全局后置钩子（afterEach）
全局后置钩子不会接受 next 函数，也不会改变导航本身，常用于页面访问统计等场景。
router.afterEach((to, from) => {
sendToAnalytics(to.fullPath)
})导航解析流程
完整的导航解析流程如下：
- 导航被触发
- 调用失活组件的
beforeRouteLeave - 调用全局的
beforeEach - 在重用的组件里调用
beforeRouteUpdate - 调用路由配置里的
beforeEnter - 解析异步路由组件
- 在被激活的组件里调用
beforeRouteEnter - 调用全局的
afterEach - 触发 DOM 更新
注意事项
- 确保总是调用
next()，否则钩子不会被 resolved beforeRouteEnter是唯一支持给next传递回调的守卫- 后置钩子不会改变导航行为，仅用于辅助操作
- 对于需要鉴权的路由，建议使用路由元信息（meta）配合全局守卫实现
