Vue 3 路由管理实战：构建多页面博客导航 - 掌握 Vue Router 实现 SPA 页面跳转

news2025/3/1 9:53:53

引言

欢迎再次回到 Vue 3 + 现代前端工程化系列技术博客！在昨天的第三篇博客中，我们深入探索了 Vue 3 响应式系统的进阶应用，通过构建简易购物车应用，熟练掌握了 watch 监听器和 computed 计算属性的运用。今天，我们将开启 Vue 3 工程化实践的全新篇章，聚焦于构建单页应用 (SPA) 的核心技术：路由管理。

在现代前端开发中，单页应用 (SPA) 已经成为主流。与传统的多页应用不同，SPA 通过动态更新组件内容来实现页面切换，无需每次都向服务器请求完整页面，从而提供更流畅、更快速的用户体验。 Vue Router 是 Vue 官方提供的路由管理器，它与 Vue.js 核心深度集成，使得构建 SPA 应用变得简单高效。在本篇博客中，我们将通过为一个简单的技术博客添加多页面导航功能，深入学习 Vue Router 的配置和使用，掌握 SPA 页面跳转、路由参数传递等关键技术。

通过这个项目，您将学习到：

Vue Router 核心概念: 深入理解路由、视图、导航、动态路由和编程式导航等核心概念。
Vue Router 安装与配置: 掌握 Vue Router 的安装步骤，并学会配置路由实例，定义路由规则。
<router-link> 和 <router-view> 组件: 熟练使用 <router-link> 组件实现声明式导航，使用 <router-view> 组件渲染匹配的组件。
动态路由: 学习配置动态路由，实现参数化路由匹配，构建更灵活的应用。
页面跳转与参数传递: 掌握在不同组件间进行页面跳转，并实现路由参数的传递和接收。
构建 SPA 应用: 体验使用 Vue Router 构建单页应用的基本流程，提升您的 SPA 应用开发能力。
工程化思维: 将路由管理融入到 Vue 3 项目中，进一步提升您的前端工程化实践水平。

项目简介：多页面博客导航

我们将为之前创建的技术博客添加多页面导航功能，使其具备以下核心功能：

首页: 展示博客的欢迎信息或文章列表 (本篇博客简化为欢迎信息)。
文章列表页: 展示所有博客文章的列表 (本篇博客简化为静态内容)。
关于页面: 展示关于博客的介绍信息 (本篇博客简化为静态内容)。
导航菜单: 在页面顶部添加导航菜单，用户可以通过点击菜单项在不同页面之间切换。
URL 路由: 实现基于 URL 的路由，当用户访问不同的 URL 时，展示不同的页面内容。

通过构建多页面博客导航，我们将深入实践：

Vue Router 安装与配置: 配置 Vue Router 实例，定义路由规则，并将其集成到 Vue 3 应用中。
声明式导航: 使用 <router-link> 组件创建导航链接，实现页面间的声明式跳转。
视图渲染: 使用 <router-view> 组件作为路由出口，渲染匹配当前路由的组件。
路由参数: (本篇博客暂不涉及路由参数，将在后续博客中讲解动态路由和路由参数的传递)。

Vue Router 核心概念回顾

在开始项目实战之前，让我们回顾 Vue Router 的核心概念，为后续的实践打下坚实的基础。

路由 (Route): 路由是 URL 到组件的映射关系。每个路由定义了一个 URL 路径 (path) 和与之对应的组件 (component)。当浏览器 URL 与某个路由的 path 匹配时，Vue Router 会将该路由对应的组件渲染到 <router-view> 中。
视图 (View): 视图是指由路由渲染的组件。在 Vue Router 中，我们通常使用 <router-view> 组件作为视图的容器。 <router-view> 会根据当前的路由动态渲染匹配的组件，从而实现页面内容的切换。
导航 (Navigation): 导航是指页面之间的跳转过程。在 Vue Router 中，我们可以使用两种方式进行导航：
- 声明式导航: 使用 <router-link> 组件，通过 to 属性指定目标路由的 path，Vue Router 会自动渲染为 <a> 标签，并处理点击事件，实现页面跳转。
- 编程式导航: 通过 Vue Router 提供的 API (例如 router.push(), router.replace(), router.go()) 在 JavaScript 代码中进行页面跳转，实现更灵活的导航控制。
动态路由 (Dynamic Routes): 动态路由允许我们创建带有参数的路由，例如 /posts/:id，其中 :id 是一个动态参数。动态路由使得我们可以使用相同的组件渲染不同参数的路由，例如展示不同 ID 的文章详情页。 (本篇博客暂不涉及动态路由，将在后续博客中讲解)。
编程式导航 (Programmatic Navigation): 编程式导航允许我们在 JavaScript 代码中控制路由跳转。Vue Router 提供了 router.push(), router.replace(), 和 router.go() 等方法来进行编程式导航。router.push() 会向 history 栈添加新的记录，允许用户通过浏览器后退按钮返回。 router.replace() 则会替换当前的 history 记录，后退按钮将跳过当前页面。 router.go(n) 允许前进或后退 history 栈 n 步。 (本篇博客主要使用声明式导航，编程式导航将在后续博客中讲解)。