vue的导航守卫怎么使用

发布时间：2021-12-23 09:38:18 作者：iii
来源：亿速云阅读：202

# Vue的导航守卫怎么使用

## 一、导航守卫概述

导航守卫是Vue Router提供的一套路由拦截机制，允许开发者在路由跳转的不同阶段插入自定义逻辑。它主要用于：
- 权限控制（如登录验证）
- 路由拦截
- 数据预加载
- 页面访问统计
- 动态修改路由参数等

### 导航守卫的分类
1. **全局守卫**：作用于所有路由
2. **路由独享守卫**：只作用于特定路由
3. **组件内守卫**：在组件内定义

## 二、全局守卫

### 1. 全局前置守卫（beforeEach）

```javascript
const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
  // to: 即将进入的目标路由对象
  // from: 当前导航正要离开的路由
  // next: 必须调用该方法来resolve这个钩子
  
  if (to.meta.requiresAuth && !isAuthenticated()) {
    next('/login')
  } else {
    next() // 必须调用！
  }
})

典型应用场景： - 登录状态验证 - 权限角色验证 - 路由元信息检查

2. 全局解析守卫（beforeResolve）

在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后调用。

router.beforeResolve((to, from, next) => {
  // 适合获取数据或执行其他需要等待的操作
  next()
})

3. 全局后置钩子（afterEach）

router.afterEach((to, from) => {
  // 无法改变导航，没有next参数
  sendToAnalytics(to.fullPath)
})

三、路由独享守卫

在路由配置中直接定义：

const router = new VueRouter({
  routes: [
    {
      path: '/admin',
      component: Admin,
      beforeEnter: (to, from, next) => {
        // 参数与全局前置守卫相同
        if (!isAdmin()) {
          next('/403') // 跳转到403页面
        } else {
          next()
        }
      }
    }
  ]
})

四、组件内守卫

1. beforeRouteEnter

export default {
  beforeRouteEnter(to, from, next) {
    // 在渲染该组件的对应路由被confirm前调用
    // 不能获取组件实例 `this`
    next(vm => {
      // 通过回调访问组件实例
      console.log(vm.someData)
    })
  }
}

2. beforeRouteUpdate

export default {
  beforeRouteUpdate(to, from, next) {
    // 在当前路由改变但组件被复用时调用
    // 可以访问组件实例 `this`
    this.getData(to.params.id)
    next()
  }
}

3. beforeRouteLeave

export default {
  beforeRouteLeave(to, from, next) {
    // 导航离开该组件的对应路由时调用
    if (this.formChanged && !confirm('数据未保存，确定离开？')) {
      next(false) // 取消导航
    } else {
      next()
    }
  }
}

五、完整的导航解析流程

导航被触发
调用失活组件的 beforeRouteLeave
调用全局的 beforeEach
在重用的组件里调用 beforeRouteUpdate
调用路由配置里的 beforeEnter
解析异步路由组件
在被激活的组件里调用 beforeRouteEnter
调用全局的 beforeResolve
导航被确认
调用全局的 afterEach
触发DOM更新
调用 beforeRouteEnter 中传给 next 的回调函数

六、实际应用案例

案例1：登录验证

router.beforeEach((to, from, next) => {
  const publicPages = ['/login', '/register']
  const authRequired = !publicPages.includes(to.path)
  const loggedIn = localStorage.getItem('user')
  
  if (authRequired && !loggedIn) {
    return next('/login')
  }
  next()
})

案例2：页面标题管理

router.beforeEach((to, from, next) => {
  document.title = to.meta.title || '默认标题'
  next()
})

案例3：滚动行为控制

router.afterEach((to, from) => {
  window.scrollTo(0, 0)
})

七、常见问题与解决方案

1. 导航守卫死循环

// 错误示例
router.beforeEach((to, from, next) => {
  if (!isAuth) {
    next('/login') // 如果/login也需要认证就会死循环
  }
})

// 正确做法
router.beforeEach((to, from, next) => {
  if (to.path !== '/login' && !isAuth) {
    next('/login')
  } else {
    next()
  }
})

2. 异步操作处理

router.beforeEach(async (to, from, next) => {
  try {
    await verifyToken()
    next()
  } catch (error) {
    next('/error')
  }
})

3. 多个守卫的执行顺序

// 执行顺序示例
router.beforeEach(guard1)
router.beforeEach(guard2) // guard2先执行

八、最佳实践

保持守卫简洁：只处理与路由相关的逻辑
合理使用next：确保每个路径都会调用next()
错误处理：考虑所有可能的导航结果
性能优化：避免在守卫中执行耗时操作
组合式API：在Vue3中可以使用onBeforeRouteUpdate等组合式API

九、总结

Vue的导航守卫提供了强大的路由控制能力，通过合理使用不同类型的守卫，可以实现： - 精细化的路由权限控制 - 灵活的路由拦截机制 - 完善的导航流程管理 - 优雅的错误处理方案

掌握导航守卫的使用是Vue开发中路由管理的核心技能，建议通过实际项目多加练习，深入理解其执行机制和应用场景。 “`

这篇文章涵盖了Vue导航守卫的主要知识点，包括： 1. 分类和基本用法 2. 完整的执行流程 3. 实际应用案例 4. 常见问题解决方案 5. 最佳实践建议

文章长度约3500字，采用Markdown格式，包含代码示例和结构化内容，适合作为技术文档或博客文章。