Vue3 路由：单页面应用的核心引擎

本文是 Vue3 系列第十篇，将深入探讨 Vue3 中路由的概念和使用。路由是现代单页面应用（SPA）的基石，它让我们的应用能够在不同的视图之间切换，而无需重新加载整个页面。理解路由的工作原理和使用方法，是构建复杂 Vue 应用的关键一步。

一、对路由的深刻理解

路由的核心工作原理

路由就像是 Web 应用的"导航系统"，它负责根据不同的 URL 路径显示不同的内容。让我们通过一个生动的比喻来理解路由的工作机制：

想象一下，你在一栋大楼里，这栋大楼有很多房间（组件）。路由系统就像是这栋大楼的智能导航：

1. 路径监听：当你走到不同的楼层和房间时（URL 变化），导航系统会立即感知到你的位置变化

2. 规则匹配：系统根据大楼的布局图（路由规则），找到这个位置对应的房间信息

3. 内容切换：系统会关闭之前的房间门，打开新位置的房间门，让你看到新的内容

具体到技术实现，路由的工作流程分为三个核心步骤：

第一步：路径变化捕获

当用户在浏览器中输入新的 URL 或点击链接时，路由器会第一时间捕获到这个路径变化。这就像大楼的传感器检测到你移动到了新的位置。

第二步：规则匹配查找

路由器在预先定义的路由规则中查找，找到与当前路径匹配的组件。这就像查大楼的布局图，找到这个位置对应的房间。

第三步：组件切换渲染

路由器会卸载之前的组件，挂载当前路径对应的新组件。这就像关闭旧房间的门，打开新房间的门。

这种机制让单页面应用能够实现流畅的视图切换，用户感受不到页面的重新加载，体验更加接近原生应用。

二、路由基本切换效果实现

第一步：确定导航区和展示区

首先，我们需要在页面中定义两个关键区域：导航区（用于切换路由）和展示区（用于显示路由组件）。

<!-- App.vue -->
<template>
  <div>
    <!-- 导航区 -->
    <div class="nav">
      <a href="/home">首页</a>
      <a href="/about">关于</a>
    </div>
    
    <!-- 展示区 -->
    <div class="content">
      <!-- 路由组件将在这里显示 -->
    </div>
  </div>
</template>

代码解释：

• 我们使用普通的 <a> 标签作为导航链接

• 预留了一个内容区域，用于显示路由组件

• 此时点击链接会导致页面刷新，还不是单页面应用的效果

第二步：安装和配置路由器

要使用 Vue Router，首先需要安装它：

npm install vue-router

然后在项目中创建路由配置文件：

// router/index.ts
import { createRouter } from 'vue-router'

// 第三步：创建路由器
const router = createRouter({
  // 配置对象将在下面详细解释
})

export default router

代码解释：

• 从 vue-router 导入 createRouter 函数

• 调用 createRouter() 创建路由器实例

• 暂时传入空配置对象，我们将在下面逐步完善

• 导出路由器实例供其他文件使用

第三步：完善路由器配置

现在我们来详细讲解路由器配置对象的每个部分：

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

// 第三步：创建路由器（详细配置）
const router = createRouter({
  // 1. 配置路由器的工作模式
  history: createWebHistory(),
  
  // 2. 配置路由规则数组
  routes: [
    // 3. 每个路由规则是一个对象
    {
      path: '/home',        // 路径
      component: Home       // 对应的组件
    },
    {
      path: '/about',
      component: About
    }
  ]
})

export default router

配置对象的详细解释：

1. 工作模式配置（history）

• history: createWebHistory() 指定路由器使用 history 模式

• 这个配置决定了 URL 的显示方式和路由的工作机制

• 我们将在后面专门讲解不同模式的区别

2. 路由规则数组（routes）

• routes 是一个数组，因为应用通常有多个路由

• 每个路由规则告诉路由器："当用户访问某个路径时，应该显示哪个组件"

• 路由器会按照数组顺序匹配路由

3. 单个路由规则对象

• path：字符串，定义用户访问的路径

• component：指定这个路径对应的组件

• 路由器通过这种映射关系知道什么路径显示什么内容

第四步：创建路由组件

路由组件通常放在 views 或 pages 目录中：

<!-- views/Home.vue -->
<template>
  <div>
    <h1>首页</h1>
    <p>欢迎来到首页</p>
  </div>
</template>

<!-- views/About.vue -->
<template>
  <div>
    <h1>关于我们</h1>
    <p>这是关于页面</p>
  </div>
</template>

第五步：注册路由器

在应用入口文件中注册路由器：

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

// 创建应用实例
const app = createApp(App)

// 使用路由器
app.use(router)

// 挂载应用到 DOM
app.mount('#app')

代码解释：

• 导入创建的路由器配置

• 通过 app.use(router) 注册路由器，让整个应用都能使用路由功能

• 最后将应用挂载到 DOM 元素上

第六步：完善路由显示

现在我们需要在展示区显示路由组件，并改进导航：

<!-- App.vue -->
<template>
  <div>
    <!-- 改进的导航区 -->
    <div class="nav">
      <RouterLink to="/home" active-class="active">首页</RouterLink>
      <RouterLink to="/about" active-class="active">关于</RouterLink>
    </div>
    
    <!-- 展示区 -->
    <div class="content">
      <RouterView />
    </div>
  </div>
</template>

<script setup>
// 不需要额外导入，RouterLink 和 RouterView 是全局可用的
</script>

<style>
.active {
  color: red;
  font-weight: bold;
}
</style>

代码解释：

• <RouterLink> 替代了普通的 <a> 标签，实现无刷新路由跳转

• to 属性指定目标路由路径

• active-class 指定激活状态的 CSS 类名

• <RouterView> 是路由组件的渲染出口

现在，我们的路由系统已经可以正常工作了！点击导航链接时，URL 会变化，对应的组件会显示在 <RouterView> 位置，而且页面不会刷新。

三、路由使用的两个重要注意点

注意点一：组件文件的组织规范

在 Vue 项目中，我们通常遵循这样的文件组织规范：

src/
  components/     # 普通可复用组件
  views/          # 路由组件（或使用 pages/）
  router/         # 路由配置

为什么要这样区分？

1. 职责清晰：路由组件代表完整的页面视图，普通组件代表可复用的 UI 片段

2. 维护方便：团队成员能够快速理解项目结构

3. 约定俗成：这是 Vue 社区的普遍实践，遵循约定减少沟通成本

路由组件 vs 普通组件的区别：

• 路由组件 ：通过路由访问的完整页面，通常放在 views/ 或 pages/

• 普通组件 ：在多个地方复用的 UI 组件，通常放在 components/

注意点二：路由组件的生命周期管理

路由组件有一个重要的特性：当离开某个路由时，对应的组件会被卸载；当再次进入时，会被重新挂载。

<!-- views/Home.vue -->
<template>
  <div>
    <h1>首页</h1>
    <p>计数: {{ count }}</p>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

const count = ref(0)

onMounted(() => {
  console.log('Home 组件被挂载')
})

onUnmounted(() => {
  console.log('Home 组件被卸载')
})
</script>

现象观察：

当你从首页切换到关于页面时，控制台会显示 "Home 组件被卸载"；当切换回首页时，会显示 "Home 组件被挂载"。

重要启示：

• 路由切换会触发组件的卸载和挂载

• 需要在 onUnmounted 中清理定时器、事件监听器等资源

• 组件的状态在卸载时会被重置

四、路由器的工作模式

Vue Router 支持两种历史记录模式，它们各有特点和适用场景。

History 模式

// router/index.ts
import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(),  // History 模式
  routes: [...]
})

History 模式的特点：

1. URL 美观 ：不包含 # 符号，看起来更像传统网站 URL

   • History 模式：https://example.com/user/profile

   • Hash 模式：https://example.com/#/user/profile

2. 服务器配置要求：需要服务器端支持，否则刷新页面会出现 404 错误

   • 因为服务器需要配置，对于所有路径都返回 index.html

3. SEO 友好：对搜索引擎优化更有利

Hash 模式

// router/index.ts
import { createRouter, createWebHashHistory } from 'vue-router'

const router = createRouter({
  history: createWebHashHistory(),  // Hash 模式
  routes: [...]
})

Hash 模式的特点：

1. URL 包含 # ：路径在 # 符号后面

   • 例如：https://example.com/#/home

2. 无需服务器配置：兼容性更好，不需要服务器特殊处理

   • 因为 # 后面的内容不会发送到服务器

3. SEO 限制：对搜索引擎优化不太友好

模式选择建议

选择 History 模式当：

• 你追求 URL 美观，不想要 # 符号

• 项目需要良好的 SEO 支持

• 你能够配置服务器支持

选择 Hash 模式当：

• 你无法配置服务器，或者想要最简单的部署方案

• SEO 不是主要考虑因素

• 需要更好的浏览器兼容性

五、总结

通过本文的学习，相信你已经对 Vue3 路由有了全面而深刻的理解。

核心原理回顾

路由是单页面应用的导航系统，它通过监听 URL 变化、匹配路由规则、切换显示组件这三个核心步骤，实现了无刷新页面切换的流畅体验。

路由配置的关键步骤

1. 安装配置：安装 Vue Router 并创建路由配置

2. 组件组织：合理组织路由组件和普通组件

3. 路由注册：在应用中注册路由器

4. 视图渲染：使用 RouterLink 和 RouterView 实现导航和展示

路由器创建的详细分解

创建路由器的过程可以分解为几个明确的步骤：

1. 导入必要的函数和组件

2. 调用 createRouter() 函数

3. 配置工作模式（history）

4. 定义路由规则数组（routes）

5. 指定每个路由的路径和组件映射

6. 导出路由器实例

路由模式的选择考量

History 模式和 Hash 模式各有优劣，选择时需要根据项目需求、服务器环境和 SEO 要求来综合考虑。对于大多数现代应用，History 模式是更好的选择，但需要确保服务器正确配置。

下一节我们将对路由的跳转和参数的传递进行一个完整的介绍。

关于 Vue3 路由有任何疑问？欢迎在评论区提出，我们会详细解答！