讲解 Vue Router 的路由守卫及应用场景

什么是路由守卫？

路由守卫就是一组函数，它们会在你切换页面（路由）时被触发。你可以在这些函数里控制要不要允许跳转、或者做一些额外的事情，比如检查用户是否登录，或者提示用户保存数据。

---

路由守卫有几种？

1. 全局前置守卫
   这个守卫在路由切换开始的时候触发，可以阻止或者允许跳转。适合用来检查权限、登录状态。

2. 全局后置守卫
   这个守卫在路由切换完成后触发，不能阻止跳转，适合做页面统计、关闭加载动画等辅助操作。

3. 路由独享守卫
   这是写在具体路由配置里的守卫，只针对该路由生效。它的功能和全局前置守卫类似，但只限本路由。

4. 组件内守卫
   这类守卫写在组件里，有三种：

   • 进入路由时调用 beforeRouteEnter
   • 当前路由参数变化时调用 beforeRouteUpdate
   • 离开当前路由时调用 beforeRouteLeave
     组件内守卫适合组件自己处理特定的逻辑，比如离开页面时提醒保存。

---

什么时候用路由守卫？

• 检查用户登录：在全局前置守卫里检查，如果用户没登录，阻止跳转到需要登录的页面，强制跳到登录页。
• 防止数据丢失：在组件内守卫 beforeRouteLeave 里提示用户“有未保存内容，确认离开吗？”。
• 加载数据：在导航守卫中预先请求接口，确保页面渲染时数据就绪。
• 统计页面访问：路由切换完成后用全局后置守卫发送访问统计数据。
• 局部特殊逻辑：某个路由跳转前单独处理特殊权限，写路由独享守卫。

---

代码示例

登录检查（全局前置守卫）：

router.beforeEach((to, from, next) => {
  const loggedIn = Boolean(localStorage.getItem('token'))
  if (to.meta.requiresAuth && !loggedIn) {
    next('/login')
  } else {
    next()
  }
})

页面离开提示（组件内守卫）：

export default {
  data() {
    return { hasUnsaved: false }
  },
  beforeRouteLeave(to, from, next) {
    if (this.hasUnsaved) {
      if (window.confirm('你有未保存内容，确定离开吗？')) {
        next()
      } else {
        next(false)
      }
    } else {
      next()
    }
  }
}

---

总结

路由守卫帮你在页面跳转前后插入代码逻辑，让你可以：

• 控制是否允许跳转
• 做权限校验
• 预加载数据
• 提示用户
• 做行为统计

合理利用路由守卫能让你的应用更安全、更智能、更好用。