vue实现路由守卫
路由守卫的基本概念
路由守卫是Vue Router提供的一种机制，用于在路由跳转前、跳转后或跳转过程中执行特定逻辑。常见的路由守卫包括全局守卫、路由独享守卫和组件内守卫。
全局前置守卫
使用router.beforeEach可以注册全局前置守卫，在路由跳转前执行。适合进行权限验证或页面访问控制。
const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
// to: 即将进入的目标路由对象
// from: 当前导航正要离开的路由
// next: 必须调用该方法来resolve这个钩子
if (to.meta.requiresAuth && !isAuthenticated()) {
next('/login')
} else {
next()
}
})全局解析守卫
router.beforeResolve在导航被确认前，同时在组件内守卫和异步路由组件被解析后调用。
router.beforeResolve((to, from, next) => {
// 适合获取数据或执行其他异步操作
next()
})全局后置钩子
router.afterEach在导航完成后执行，没有next参数，不能改变导航本身。
router.afterEach((to, from) => {
// 适合页面访问统计或修改页面标题
document.title = to.meta.title || 'Default Title'
})路由独享守卫
可以在路由配置中直接定义beforeEnter守卫，只对该路由生效。
const router = new VueRouter({
routes: [
{
path: '/admin',
component: Admin,
beforeEnter: (to, from, next) => {
if (!isAdmin()) {
next('/')
} else {
next()
}
}
}
]
})组件内守卫
在组件内部可以定义以下守卫：
beforeRouteEnterbeforeRouteUpdatebeforeRouteLeave
export default {
beforeRouteEnter(to, from, next) {
// 不能访问this，因为组件实例还没被创建
next(vm => {
// 通过vm访问组件实例
})
},
beforeRouteUpdate(to, from, next) {
// 当前路由改变但组件被复用时调用
// 可以访问this
next()
},
beforeRouteLeave(to, from, next) {
// 导航离开该组件时调用
// 可以访问this
const answer = confirm('确定要离开吗？')
if (answer) {
next()
} else {
next(false)
}
}
}完整的路由守卫流程
- 导航被触发
- 调用全局
beforeEach守卫 - 在重用的组件里调用
beforeRouteUpdate守卫 - 在路由配置里调用
beforeEnter守卫 - 解析异步路由组件
- 在被激活的组件里调用
beforeRouteEnter守卫 - 调用全局
beforeResolve守卫 - 导航被确认
- 调用全局
afterEach钩子 - 触发DOM更新
- 用创建好的实例调用
beforeRouteEnter守卫中传给next的回调函数
路由元信息的使用
可以通过meta字段定义路由元信息，在守卫中访问这些信息进行权限控制。
const router = new VueRouter({
routes: [
{
path: '/profile',
component: Profile,
meta: { requiresAuth: true }
}
]
})异步路由守卫
路由守卫可以返回Promise，实现异步控制流程。
router.beforeEach(async (to, from, next) => {
try {
await verifyToken()
next()
} catch (error) {
next('/login')
}
})常见应用场景
- 登录验证：检查用户是否登录，未登录则跳转到登录页
- 权限控制：根据用户角色限制访问特定路由
- 数据预加载：在进入路由前获取必要数据
- 表单保护：防止用户在填写表单时意外离开
- 页面追踪：记录用户访问路径
