VueRouter 是 Vue.js 的官方路由管理器，用于構建單頁面應用（SPA）。在使用 VueRouter 時，開發者可以定義路由映射規則，并在 Vue 組件中通過編程式導航或聲明式導航的方式控制頁面的跳轉和展示。以下是 VueRouter 使用的一些總結和要點：
1. 安裝和引入
- 通過 npm 或 yarn 安裝 VueRouter。
- 在項目中引入 VueRouter 并將其添加到 Vue 實例中。
2. 定義路由
- 使用?
routes?數組定義路由規則，每個路由對象包括?path（路徑）、component（組件）和可選的?name（名稱）、props（傳遞給組件的屬性）、meta（元信息）等屬性。
3. 創建路由實例
- 使用?
VueRouter?構造函數創建路由實例，并將定義的路由規則作為參數傳入。 - 將路由實例添加到 Vue 實例中，以便在組件中使用。
4. 聲明式導航
- 在模板中使用?
<router-link>?組件實現聲明式導航。<router-link>?組件會渲染成一個?<a>?標簽，并自動添加點擊事件處理函數，以實現頁面跳轉。 - 可以通過?
to?屬性指定目標路由的路徑或名稱。
5. 編程式導航
- 在 JavaScript 代碼中使用?
this.$router.push()?或?this.$router.replace()?方法實現編程式導航。 push()?方法會向歷史記錄添加一個新的記錄，用戶可以點擊瀏覽器的后退按鈕返回前一個頁面。replace()?方法則不會向歷史記錄添加新的記錄，而是替換當前記錄。
6. 動態路由匹配
- 使用通配符?
:param?實現動態路由匹配。在路由規則中定義參數，并在組件中通過?$route.params?訪問這些參數。
7. 嵌套路由
- 在路由規則中使用?
children?屬性定義嵌套路由。嵌套路由的組件將渲染到父路由組件的?<router-view>?中。
8. 路由守衛
- VueRouter 提供了全局守衛、路由獨享的守衛和組件內的守衛三種方式來實現路由跳轉前后的鉤子函數。
- 可以使用這些守衛來檢查用戶是否登錄、是否擁有訪問權限等，以控制頁面的訪問和跳轉。
9. 路由元信息
- 在路由規則中定義?
meta?字段來添加路由元信息。這些信息可以在組件內通過?$route.meta?訪問。 - 可以使用元信息來實現頁面標題的動態設置、權限控制等功能。
10. 滾動行為
- VueRouter 允許你自定義路由切換時頁面滾動的行為。通過全局配置?
scrollBehavior?函數來實現。
11. 路由懶加載
- 為了提高應用性能，可以使用 Vue 的異步組件和 Webpack 的代碼分割功能實現路由懶加載。這樣可以在需要時才加載相應的路由組件代碼。
12. 導航守衛和全局前置守衛
- 導航守衛（Navigation Guards）允許你在路由變化的過程中進行一些操作，如檢查登錄狀態、權限驗證等。
- 全局前置守衛（Global Before Guards）是最常用的守衛之一，它在路由變化之前觸發，可以阻止路由跳轉或重定向到其他路由。
13. 路由視圖和命名視圖
<router-view>?組件用于渲染當前路由對應的組件。默認情況下，它只渲染一個組件。但你也可以使用命名視圖（Named Views）來同時渲染多個組件。
14. 路由重定向和別名
- 可以使用?
redirect?屬性實現路由重定向，將某個路徑的訪問重定向到其他路徑。 - 也可以使用?
alias?屬性為路由設置別名，使多個路徑都能訪問到同一個路由組件。
15. 路由參數傳遞
- 可以通過路由參數（如 query 和 params）在路由之間傳遞數據。在目標組件中可以通過?
$route?對象訪問這些參數。
)
