Vue Academy · 课时

导航守卫

Q: 「导航守卫」这节课中我会学到什么？

保护路由，并使用守卫在导航时运行逻辑 你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

保护路由，并使用守卫在导航时运行逻辑

导航守卫 是 CoddyKit 上的免费 Vue Academy 课时。这是第 3 节课，共 3 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Vue Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Vue Academy 课程共包含 3 节课。

什么是导航守卫

导航守卫允许您在路由变化之前、期间或之后运行代码。

阻止或重定向导航
检查身份验证状态
离开页面前进行确认

守卫的类型

守卫分为三个层级：

全局守卫会在每次导航时运行
路由级守卫只针对某一个特定路由运行
组件内守卫会在组件内部运行

beforeEach 全局守卫

router.beforeEach会在每次导航前运行。它会接收目标路由和当前路由。

router.beforeEach((to, from) => {
  console.log("going to", to.path)
  // return true to allow,
  // or a route to redirect
})

允许或重定向

在 Vue Router 4 中，返回一个值即可控制流程。

返回 true 或不返回任何内容，以允许导航
返回 false 以取消导航
返回一个路由位置以进行重定向

router.beforeEach((to) => {
  if (to.meta.requiresAuth && !isLoggedIn()) {
    return { name: "login" }
  }
  return true
})

路由元数据字段

可以为路由附加自定义元数据，例如 requiresAuth，然后在守卫中读取。

const routes = [
  {
    path: "/dashboard",
    component: Dashboard,
    meta: { requiresAuth: true }
  }
]

身份验证守卫

一种常见模式是在全局守卫中检查身份验证状态，以保护路由。

router.beforeEach((to) => {
  const authed = localStorage.getItem("token")
  if (to.meta.requiresAuth && !authed) {
    return { name: "login", query: { redirect: to.fullPath } }
  }
})

路由级 beforeEnter

beforeEnter直接在路由定义中保护单个路由。

const routes = [
  {
    path: "/admin",
    component: Admin,
    beforeEnter: (to, from) => {
      return isAdmin() ? true : { name: "home" }
    }
  }
]

组件内守卫

组件可以定义自己的守卫。导航离开时会运行 onBeforeRouteLeave。

import { onBeforeRouteLeave } from "vue-router"

onBeforeRouteLeave((to, from) => {
  if (hasUnsavedChanges.value) {
    return window.confirm("Leave without saving?")
  }
})

onBeforeRouteUpdate

当路由发生变化但复用同一个组件时（参数变化），会运行 onBeforeRouteUpdate。

import { onBeforeRouteUpdate } from "vue-router"

onBeforeRouteUpdate((to) => {
  loadUser(to.params.id)
})

next 回调（经典写法）

旧代码使用第三个参数 next来控制导航。现在更推荐返回一个值。

// Classic style with next()
router.beforeEach((to, from, next) => {
  if (canAccess(to)) {
    next()         // proceed
  } else {
    next("/login") // redirect
  }
})

返回值与 next()

两种写法，实现相同目标：

返回一个值（现代且更简洁）：true、false 或一个位置
调用 next()（经典写法）：继续导航或进行重定向

不要在同一个守卫中混用两种写法。新代码推荐使用返回值的写法。

快速检查

测试您对导航守卫的理解。

回顾：导航守卫

您已经学会控制导航：

beforeEach全局守卫会在每个路由上运行
返回 true 以允许导航，返回 false 以取消，或返回一个位置以重定向
requiresAuth 等 元数据字段用于驱动身份验证检查
beforeEnter保护单个路由
onBeforeRouteLeave等组件内守卫负责处理离开操作

您已经完成 Vue.js 基础课程！

常见问题解答

「导航守卫」课时是免费的吗？

是的 — 「导航守卫」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Vue Academy 课程的其余内容，请升级到 CoddyKit PRO。 Vue Academy 课程共包含 3 节课。

「导航守卫」这节课中我会学到什么？

保护路由，并使用守卫在导航时运行逻辑你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Vue Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Vue Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 3 节课，共 3 节。

「导航守卫」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Vue Academy 课中编写并运行代码吗？

能。每节 Vue Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Vue Academy