在前幾篇文章中，我們介紹了 Vue 的性能優化機制、組件緩存等內容。本篇將深入解析 Vue Router 的原理，了解 Vue 如何管理路由并進行導航。

---

目錄

1. Vue Router 的基本概念
2. 路由模式：hash 和 history
3. 路由匹配原理
4. 導航守衛
5. Vue Router 的路由過渡動畫
6. 小結

---

Vue Router 的基本概念

Vue Router 是 Vue.js 官方提供的路由管理插件，負責管理 Vue 應用的頁面導航。通過 Vue Router，開發者可以創建單頁應用（SPA），在不同的視圖間進行切換而無需重新加載頁面。

Vue Router 的核心概念：

• 路由配置：通過定義路由規則，告訴 Vue 哪個 URL 對應哪個組件。
• 路由匹配：根據 URL 自動匹配對應的組件進行渲染。
• 路由導航：實現頁面跳轉，通過編程式導航或聲明式導航切換視圖。

---

路由模式：hash 和 history

Vue Router 支持兩種路由模式：hash 模式和 history 模式。它們分別有不同的工作原理和適用場景。

1. Hash 模式

在 Hash 模式下，URL 中的路由信息會通過 # 符號來傳遞。瀏覽器不會重新加載頁面，所有的路由切換都是通過修改 URL 后的哈希值來實現的。

http://example.com/#/home

優點：簡單，兼容性好，不需要服務器支持。

缺點：URL 中包含 #，影響 SEO 和 URL 美觀。

2. History 模式

在 History 模式下，URL 使用的是 HTML5 提供的 History API，沒有 # 符號。Vue Router 會監聽瀏覽器的歷史記錄變化，來實現頁面的跳轉。

http://example.com/home

優點：URL 更加簡潔，符合現代 Web 應用的標準。

缺點：需要服務器支持，必須配置服務器返回 index.html，否則刷新頁面會 404。

---

路由匹配原理

Vue Router 的路由匹配是基于 路徑匹配 和 組件渲染 的。Vue Router 會根據 URL 的路徑找到匹配的組件，并將其渲染到頁面上。

路由配置

路由的配置由 routes 數組定義，每個路由對象包含路徑和組件兩個屬性。

復制代碼
const routes = [{ path: '/home', component: Home },{ path: '/about', component: About }
]

路由匹配

當瀏覽器的 URL 地址變化時，Vue Router 會依次與路由配置中的每個路徑進行匹配，直到找到符合的路徑并渲染相應組件。

const router = new VueRouter({routes
})

動態路由

Vue Router 還支持動態路由，允許在路徑中包含動態參數。

const routes = [{ path: '/user/:id', component: User }
]

當路徑為 /user/123 時，id 會作為參數傳遞給 User 組件。

---

導航守衛

導航守衛是 Vue Router 中的一個強大功能，它允許你在路由變化之前、之后或路由進入、離開時執行某些邏輯。常見的導航守衛包括 全局守衛、路由獨享守衛 和 組件內守衛。

1. 全局守衛

全局守衛在路由變化之前或之后執行。可以使用 beforeEach 和 afterEach 方法進行配置。

復制代碼
router.beforeEach((to, from, next) => {// 路由切換前的操作next()
})

2. 路由獨享守衛

路由獨享守衛是針對每個路由獨立配置的守衛，可以在路由配置中直接添加 beforeEnter。

const routes = [{path: '/home',component: Home,beforeEnter: (to, from, next) => {// 路由獨享守衛next()}}
]

3. 組件內守衛

組件內守衛是在組件生命周期中執行的守衛，通常用在單個組件中。

復制代碼
export default {beforeRouteEnter(to, from, next) {// 進入路由前執行next()},beforeRouteLeave(to, from, next) {// 離開路由前執行next()}
}

---

Vue Router 的路由過渡動畫

Vue Router 還支持路由切換時的過渡動畫。通過 <transition> 標簽包裹路由視圖，可以為路由切換添加動畫效果。

示例：

復制代碼
<transition name="fade" mode="out-in"><router-view></router-view>
</transition><style>
.fade-enter-active, .fade-leave-active {transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {opacity: 0;
}
</style>

通過這種方式，可以為路由切換增加淡入淡出的動畫效果，提高用戶體驗。

---

小結

1. Vue Router 是 Vue.js 的官方路由管理工具，支持 hash 模式 和 history 模式。
2. 路由匹配是基于路徑和組件的，支持靜態和動態路由。
3. 導航守衛 提供了強大的功能，用于在路由變化時執行特定邏輯。
4. 路由過渡動畫 使得頁面切換更為流暢和自然。

---

📗下一篇進階文章，我們將學習 Vuex 內部機制，了解 Vuex 的核心工作原理以及如何管理狀態。