Vue Router

这一课你将能做到

1. 配置路由表，用 RouterLink / RouterView 完成多页切换
2. 声明动态路由参数并用 useRoute 读取
3. 写一个简单导航守卫（如未登录重定向），并对照 Next.js 路由心智

为什么要学

SPA 没有整页刷新时，需要前端路由决定渲染哪棵组件树。
本站 platform 用 Next App Router；Vue 生态标准是 Vue Router。学会后，后台管理系统的菜单=路由表这一模式会非常眼熟。

先建立图像

URL /tracks/:slug
   → 匹配路由记录
   → 渲染对应组件到 <RouterView />
   → 组件内 useRoute().params.slug

概念	人话
routes	路径与组件的表
RouterLink	声明式导航（可访问更好）
RouterView	出口，挖坑渲染
导航守卫	跳转前/后的钩子

跟着做

步骤 1：确认依赖

create-vue 勾选 Router 则已有。否则：

npm install vue-router@4

步骤 2：最小路由表

// router/index.js
import { createRouter, createWebHistory } from "vue-router";
import HomeView from "../views/HomeView.vue";
import TrackView from "../views/TrackView.vue";

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: "/", name: "home", component: HomeView },
    { path: "/tracks/:slug", name: "track", component: TrackView },
  ],
});

export default router;

main 里：app.use(router)。

步骤 3：布局出口

<!-- App.vue -->
<script setup>
import { RouterLink, RouterView } from "vue-router";
</script>

<template>
  <nav>
    <RouterLink to="/">首页</RouterLink>
    <RouterLink to="/tracks/vue-essentials">Vue 课</RouterLink>
  </nav>
  <RouterView />
</template>

点击链接应切换视图且浏览器地址变化。

步骤 4：读动态参数

<!-- TrackView.vue -->
<script setup>
import { computed } from "vue";
import { useRoute } from "vue-router";
const route = useRoute();
const slug = computed(() => route.params.slug);
</script>

<template>
  <h1>课程：{{ slug }}</h1>
</template>

访问 /tracks/sql-essentials 应显示对应 slug。

步骤 5：简易守卫

const isLoggedIn = () => localStorage.getItem("demo-token") === "1";

router.beforeEach((to) => {
  if (to.meta.requiresAuth && !isLoggedIn()) {
    return { path: "/", query: { redirect: to.fullPath } };
  }
});

// 某路由：
// { path: '/me', component: MeView, meta: { requiresAuth: true } }

未登录进 /me 应回首页。真实鉴权要对接后端；这里只练守卫形状。

步骤 6：对照 Next

Vue Router	Next App Router
routes 表	文件系统 app/
useRoute	hooks / params props
beforeEach	middleware 等

本站主产品走 Next；Vue 练习项目走 Vue Router——不要混进 platform。

讲清楚要点

1. history 模式需服务器回退到 index.html；开发期 Vite 已处理。
2. 声明式 RouterLink 优于到处 window.location。
3. params 是字符串：必要时自己转数字。
4. 懒加载路由：() => import('…') 减小首包。
5. 守卫返回值：Vue Router 4 推荐返回新路径或 true；别混旧 next 风格资料。
6. 嵌套路由：后台布局常见 parent + children；综合练习会碰到。

你可能会懵的地方

• 刷新 404？
  部署静态托管未配回退。本地 dev 一般正常。

• useRouter vs useRoute？
  前者导航方法，后者当前路由信息。

• query 与 params？
  params 在路径里；query 是 ?a=1。

• 和 Pinia 谁先谁后？
  通常 app.use(pinia); app.use(router)；守卫里可读 store。

• SSR？
  Nuxt 场景；本课 CSR SPA 足够。

错法对照

错法	问题	正解
用 <a href> 整页刷新	丢失 SPA 状态	RouterLink
监听不到 params 变化	组件复用未刷新	watch route 或 key
守卫死循环重定向	白屏/卡死	条件写清
把 token 仅藏前端当安全	可伪造	后端校验
路由表巨型同步 import	首包大	懒加载
抄 Vue Router 3 的 next 教程	API 过时	以 v4 文档为准

自测三问

1. RouterView 的作用是什么？
2. 动态段 :slug 在组件里怎么读？
3. 导航守卫适合放哪些检查？不适合替代什么？

小结一句话

Vue Router 用路由表把 URL 映射到组件树；Link/View/守卫构成多页 SPA 的骨架。

官方延伸

• Vue Router 文档
• 下一课：Pinia 状态管理