【vue3|第16期】初探Vue-Router与现代网页路由

日期：2024年7月6日
作者：Commas
签名：(ง •_•)ง 积跬步以致千里,积小流以成江海……
注释：如果您觉得有所帮助，帮忙点个赞，也可以关注我，我们一起成长；如果有不对的地方，还望各位大佬不吝赐教，谢谢^ - ^
1.01³⁶⁵ = 37.7834；0.99³⁶⁵ = 0.0255
1.02³⁶⁵ = 1377.4083；0.98³⁶⁵ = 0.0006

说在最前面：本文 vue3 的示例代码，在没有另外声名的情况下，均采用 <script setup> 组合式代码风格，风格统一，避免混乱，请各位新老食客放心食用哈 ^ _ ^

---

---

---

一、前言

亲爱的读者们，今天我们将一起走进 Vue.js 框架中一个极为重要的部分——Vue-Router。如果你是一名前端开发者，或者对构建单页应用程序（SPA）感兴趣，那么 Vue-Router 无疑是你技术栈中的重要一环。在这篇文章中，我将带你了解什么是路由以及路由器，并深入探讨 Vue-Router 如何帮助我们优雅地管理页面间的跳转。

二、什么是Vue-Router？

Vue-Router 是 Vue.js 官方的路由管理器，它与 Vue.js 核心深度集成，专为单页应用（SPA）设计，用于管理单页应用中的 页面跳转 和 视图渲染。

简单来说，它允许我们在单个页面中创建多个视图，并通过URL的变化来控制这些视图之间的切换。这意味着，我们可以通过改变URL来加载不同的组件，而不需要刷新整个页面。这种“页面切换时的无感刷新”的用户体验，正是 现代 Web 应用 所追求的，同时也保持较低的服务器负载，一举两得，何乐而不为呢？

三、路由与路由器的概念

在我们深入 Vue-Router 之前，让我们先理解两个基本概念：路由 和 路由器。

路由（Route） 是指在Web应用中，用户可以通过输入 URL 或点击链接到达的不同页面。在传统的多页面应用（MPA）中，每次 URL 变化都会导致一个新的 HTTP 请求，服务器响应后返回一个全新的 HTML 页面。而在 SPA 中，路由则是指通过 JavaScript 来控制页面的不同状态和视图。

路由器（Router） 是一个 管理这些路由的工具。它监听 URL 的变化，并根据这些变化来决定应该显示哪个组件。在 Vue.js 中，Vue-Router 就是这个路由器。它提供了一系列的方法和钩子，让我们可以定义路由规则，处理导航守卫，以及实现诸如懒加载、滚动行为等高级功能。

四、Vue-Router的核心功能

• 声明式导航：通过 <router-link> 组件，我们可以轻松创建指向不同页面的链接，而不必编写繁琐的 window.location 代码。

• 嵌套路由（Nested Routes）：Vue-Router 支持嵌套路由，这使得我们可以构建复杂的页面布局，每个部分都可以有自己的路由配置。

• 编程式导航（Programmatic