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 } }