日期：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