Vue Router 如何处理路由和守卫？

Question

Accepted Answer

**Vue Router** 是 Vue SPA 的官方客户端路由器。它将 URL 映射到组件，并在**不进行完整页面重新加载的情况下**交换它们，并提供**导航守卫**在导航之前运行逻辑（如身份验证检查）。 ## 定义路由 ```js import { createRouter, createWebHistory } from "vue-router"; const routes = [ { path: "/", component: Home }, { path: "/users/:id", component: UserProfile }, // dynamic param { path: "/dashboard", component: () => import("./Dashboard.vue"), // lazy-loaded meta: { requiresAuth: true } }, // attach metadata ]; const router = createRouter({ history: createWebHistory(), routes }); ``` ## 导航和读取参数 ```vue ``` ## 导航守卫 — 在导航前运行逻辑 ```js // global guard — runs before EVERY navigation (great for auth) router.beforeEach((to, from) => { const authed = useAuthStore().isLoggedIn; if (to.meta.requiresAuth && !authed) { return "/login"; // redirect: return a path (or false to cancel) } // returning true / nothing → allow the navigation }); ``` 守卫接收 **`to`**（目标路由）和 **`from`**（当前路由），可以允许、取消（`false`）或重定向（返回一个位置）。`meta.requiresAuth` 标志 + 全局 `beforeEach` 是规范的身份验证门控模式。 ## 守卫级别 ```text Global: router.beforeEach / afterEach — every navigation (auth, analytics) Per-route: beforeEnter in the route config — specific routes In-component: onBeforeRouteLeave — e.g. "unsaved changes, leave?" prompts ``` ## 嵌套路由和其他功能 ```js { path: "/settings", component: Settings, children: [ { path: "profile", component: Profile }, // → /settings/profile, renders in nested ]} ``` 另外：路由参数、查询字符串、命名路由、滚动行为和懒加载路由组件以实现代码分割。 ## 为什么这很重要 Vue Router 对任何多页面 Vue SPA 都是必不可少的 — 它提供客户端导航（快速、无重新加载）、动态/嵌套路由和 `RouterLink`/`RouterView`。导航守卫是跨切面关注点的关键功能：通过身份验证控制受保护的路由、记录页面浏览和防止从未保存的表单导航离开。用于身份验证的 `meta` + 全局 `beforeEach` 模式是几乎每个真实应用都会实现的内容。