Vue3 多页路由：Vue Router怎么接

单页应用（SPA）最怕“所有页面都堆在一个组件里”，切视图靠 v-if 硬切，地址栏永远不变，刷新就回到首页，分享链接也分享不了具体页面。Vue Router 就是来解决这个问题的：它把 URL 和组件映射起来，访问不同地址就渲染不同组件，浏览器前进后退、刷新都正常。这篇文章用一个最小的多页结构，把 Vue Router 的核心用法跑通。

一、为什么需要前端路由而不是手动切组件

没有路由时，所谓“多页”其实是一个页面里用条件渲染假装切换，URL 不会变，用户没法把某个子页面存成书签，SEO 也抓不到子页面内容。路由把“地址”变成一等公民：每个视图对应一个路径，点击跳转就是改地址，组件按地址渲染。这样刷新、分享、后退都是原生行为，不用自己造轮子。

Vue Router 是 Vue 官方维护的路由库，和 Vue3 的响应式、组件系统配合最顺，配置方式也直观。

二、安装与最小目录

装好依赖后，项目里多一个 router 目录放路由配置，views 目录放每个页面组件：

src/
  router/index.ts   # 路由表
  views/Home.vue    # 首页
  views/About.vue   # 关于页
  App.vue           # 根组件，放 <router-view/>

App.vue 里不放具体页面内容，只放一个出口。真正渲染哪个页面，由当前 URL 决定。

三、定义路由表

路由表本质是一个数组，每一项把 path 和要渲染的组件对应起来。这里用的是历史模式（history），地址干净、没有 # 号。

// router/index.ts
import { createRouter, createWebHistory } from 'vue-router';
import Home from '@/views/Home.vue';
import About from '@/views/About.vue';

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About },
  ],
});

export default router;

两个细节值得说。第一，createWebHistory 需要服务端配合：刷新子页面时服务器要把请求兜底到 index.html，否则部署到静态服务器会 404。本地开发脚手架已经处理了，上线时记得配。第二，组件这里用了静态导入，页面多了可以改成懒加载（动态 import），按需加载、首屏更快。

四、在根组件放出口和跳转

App.vue 里用 <router-view/> 当渲染出口，用 <router-link> 做跳转。它渲染出来是 <a> 标签，但不会整页刷新，只是改地址、换组件。

<!-- App.vue -->
<template>
  <nav>
    <router-link to="/">首页</router-link>
    <router-link to="/about">关于</router-link>
  </nav>
  <router-view />
</template>

router-view 所在的位置，会被当前路由匹配的组件替换掉。导航栏始终在，下面的内容随地址变，这就是典型的多页外壳。

五、再加个带参数的详情页

真实项目里常需要“列表点进去看详情”。加一个动态路由，路径里用 :id 占位，组件里通过 route.params 拿到值：

{ path: '/post/:id', component: Post }

<!-- Post.vue -->
<script setup>
import { useRoute } from 'vue-router';
const route = useRoute();
// route.params.id 就是地址里的那段
</script>

动态段可以有多段，匹配时按顺序取。这种“一类页面一套组件、用参数区分具体哪条”的模式，是列表/详情类应用的基础。

六、几个容易踩的点

第一，路由顺序有影响，更具体的路径放前面，避免被宽松规则先匹配。第二，组件里拿参数要用 useRoute 而不是在 setup 外直接读，否则响应式会断。第三，如果某个子页面需要登录才能看，路由守卫（beforeEach）是做这件事的地方，本文先不展开。

七、小结

Vue Router 把“URL ↔ 组件”这件事标准化了：路由表定义映射，<router-view> 是出口，<router-link> 是跳转，动态段 :id 支撑详情页。理解这三块，一个 Vue3 项目从单页变多页就只是加路由配置的事。后面要做嵌套路由、路由守卫、懒加载，都是在这套基础上加。