探索Vue Router：構建高效單頁面應用的指南

引言

Vue Router，作為Vue.js的官方路由管理器，為構建SPA提供了強大的支持

Vue Router 基礎

Vue Router 的基本概念和作用

Vue Router 是一個用于構建單頁面應用的 Vue.js 插件。它允許我們通過定義路由規則來將不同的 URL 映射到不同的組件，從而實現頁面內容的動態渲染和切換，而不需要重新加載整個頁面。Vue Router 提供了一種聲明式的、嵌套路由配置方式，使得構建復雜的應用變得簡單。

如何安裝和配置 Vue Router

（操作起來比較繁瑣，建議新手反復觀看官方文檔）

安裝

Vue Router 可以通過 npm 或 yarn 進行安裝（終端輸入）：

npm install vue-router
# 或者
yarn add vue-router

配置

安裝完成后，你需要在 Vue 應用中引入并使用 Vue Router：

import Vue from 'vue';
import VueRouter from 'vue-router';Vue.use(VueRouter);

然后，創建一個?Router?實例，并定義路由規則：

const Foo = { template: '<div>foo</div>' };
const Bar = { template: '<div>bar</div>' };const routes = [{ path: '/foo', component: Foo },{ path: '/bar', component: Bar }
];const router = new VueRouter({routes // （縮寫）相當于 routes: routes
});

最后，創建和掛載根實例時，需要確保?router?配置到根實例中：

const app = new Vue({router
}).$mount('#app');

路由的基本使用

<router-link>?是一個組件，用于創建導航鏈接，類似于 HTML 中的?<a>?標簽。<router-link>?的?to?屬性用于指定目標路由的路徑。

<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>

<router-view>?是一個組件，它用于渲染匹配當前路由的組件。當路由變化時，<router-view>?會根據路由規則動態地加載對應的組件。

<router-view></router-view>

在定義了路由和組件后，當用戶點擊?<router-link>?導航時，<router-view>?會渲染對應的組件。例如，當用戶點擊 “Go to Foo” 時，<router-view>?會渲染?Foo?組件。

動態路由匹配

使用動態路徑參數來定義路由

動態路徑參數以冒號?:?開頭，它們類似于正則表達式的占位符，用于捕獲 URL 的一部分。例如，如果我們有一個用戶個人資料頁面的路由，我們可以這樣定義它：

const User = {template: '<div>User {{ $route.params.id }}</div>'
};const router = new VueRouter({routes: [// 動態路徑參數以冒號開始{ path: '/user/:id', component: User }]
});

在這個例子中，任何形式的?/user/x?都會映射到同一個路由，其中?x?可以是任何值。當匹配到路由時，x?的值會被存儲在?$route.params.id?中。

獲取路由參數和查詢參數

路由參數

在組件內部，我們可以通過?$route.params?對象來訪問路由參數。例如，在上述的?User?組件中，我們可以通過?this.$route.params.id?來獲取用戶 ID。

查詢參數

查詢參數是 URL 中的鍵值對，通常用于搜索、過濾等場景。它們位于 URL 的???之后，多個參數之間用?&?分隔。例如，/user?id=123&name=alice。在 Vue Router 中，我們可以通過?$route.query?對象來訪問這些參數。

例如，在組件中：

this.$route.query.id; // 獲取 id 參數
this.$route.query.name; // 獲取 name 參數

完整的例子

假設我們有一個商品詳情頁面的路由，我們希望通過路徑參數傳遞商品 ID，并通過查詢參數傳遞頁碼和排序方式：

const Product = {template: `<div>商品 ID: {{ $route.params.id }}<br>頁碼: {{ $route.query.page }}<br>排序方式: {{ $route.query.sort }}</div>`
};const router = new VueRouter({routes: [{ path: '/product/:id', component: Product }]
});

?說了這么多，肯定會有小伙伴對路由參數和查詢參數傻傻分不清，讓我們詳細講講

由參數和查詢參數異同與各自優勢

路由參數

路由參數是定義在路由路徑中的動態部分，通常用于表示 URL 的一個固定部分，它們是 URL 結構的一部分，用于區分不同的路由。

優勢：

明確性：路由參數通常用于唯一標識一個資源，如用戶 ID、產品 ID 等，它們是 URL 的固有部分，明確表示了資源的定位。
結構化：路由參數有助于保持 URL 的結構化和清晰，使得 URL 更具可讀性。
可緩存：由于路由參數是 URL 的一部分，因此對于具有相同參數的請求，瀏覽器和歷史記錄可以更有效地緩存和管理。

查詢參數

查詢參數是鍵值對，通常用于提供對資源的額外過濾、排序或分頁信息。它們通常出現在 URL 的???之后，多個參數之間用?&?分隔。

優勢：

靈活性：查詢參數可以包含任意數量的鍵值對，且可以隨時添加或刪除，而不影響 URL 的基本路徑。
非侵入性：查詢參數不會影響 URL 的基本結構，因此可以用于任何路由，而不需要為每個參數組合定義新的路由。
可變性強：查詢參數非常適合用于搜索、篩選、分頁等場景，因為這些操作通常需要根據用戶輸入或選擇動態變化。

不同點

位置：路由參數位于 URL 路徑中，而查詢參數位于 URL 的查詢字符串中。
用途：路由參數用于標識資源，查詢參數用于提供資源的額外信息。
訪問方式：在 Vue Router 中，路由參數通過?$route.params?訪問，查詢參數通過?$route.query?訪問。
變化影響：改變路由參數通常會導致路由的變化，從而可能導致組件的重新渲染；而改變查詢參數通常不會導致路由的變化，但可以通過監聽?$route.query?來更新組件的狀態。

講人話，經常要變化的就用query，不經常變化的就用params

編程式導航

這一塊其實相對來講難度并不大，相信同學們都學過英語吧

編程式導航是 Vue Router 提供的一種通過編碼方式實現路由跳轉的方法。它允許你在 JavaScript 代碼中直接調用路由實例的方法來改變當前路由。這種方法非常靈活，因為它可以在任何地方觸發導航，包括按鈕點擊事件、異步操作完成之后，或者在某些條件邏輯中。

`this.$router.push()`

this.$router.push()?是最常用的編程式導航方法之一。它用于導航到不同的 URL，可以向歷史記錄中添加新的記錄。這個方法接收一個目標位置作為參數，可以是字符串路徑、對象形式的路徑或者命名的路由。

示例：

// 字符串路徑
this.$router.push('/home');// 對象形式
this.$router.push({ path: '/home' });// 命名路由，假設有一個名為 `home` 的路由
this.$router.push({ name: 'home' });// 帶查詢參數，結果是 /register?plan=private
this.$router.push({ path: '/register', query: { plan: 'private' } });

`this.$router.replace()`

this.$router.replace()?用于導航到一個新的 URL，但是它不會向歷史記錄中添加新的記錄，而是替換掉當前的記錄。當你不想讓用戶通過瀏覽器的后退按鈕回到上一個頁面時，這個方法非常有用。

示例：

// 字符串路徑
this.$router.replace('/home');// 對象形式
this.$router.replace({ path: '/home' });// 命名路由，假設有一個名為 `home` 的路由
this.$router.replace({ name: 'home' });// 帶查詢參數，結果是 /register?plan=private
this.$router.replace({ path: '/register', query: { plan: 'private' } });

`this.$router.go()`

this.$router.go()?允許你在歷史記錄中前進或后退。這個方法的參數是一個整數，表示前進或后退的步數。

示例：

// 前進 3 步
this.$router.go(3);// 后退 1 步
this.$router.go(-1);// 前進或后退到特定的歷史記錄，比如前進到第 3 個記錄
this.$router.go(3);

注意事項

在使用編程式導航時，應當注意避免重復導航到同一個路由，因為這可能會導致一些問題，比如無限循環。通常，你可以在導航前檢查當前路由是否已經是目標路由，或者使用?replace?方法來避免添加新的歷史記錄。

Vue Router 進階

動態添加和替換路由

在 Vue Router 中，你可以通過編程的方式動態地添加或替換路由。這通常在應用運行時根據某些條件動態加載新路由時使用。

動態添加路由

你可以使用?addRoute?或?addRoutes?方法來動態添加路由。

const router = new VueRouter({// ... 初始路由配置
});// 添加新的路由
router.addRoute({path: '/new-page',component: NewPage
});// 添加多個路由
router.addRoutes([{ path: '/another-page', component: AnotherPage },{ path: '/third-page', component: ThirdPage }
]);

動態替換路由

使用?replace?方法可以動態替換當前路由，而不會添加到歷史記錄中。

router.replace({ path: '/new-page' });

動態添加和替換路由的注意事項

動態添加的路由在應用啟動時可能不會立即生效，除非你明確地調用?router.addRoutes()。
動態替換的路由會立即替換當前路由，但不會添加到歷史記錄中。
動態添加或替換路由時，確保你的應用邏輯正確，以避免不必要的路由沖突或導航錯誤。

?兩種URL 模式

1. 歷史模式（History Mode）

歷史模式（history）的 URL 看起來像傳統的服務器端渲染的網站，不包含?#。這種模式下，URL 類似于?http://example.com/user/123，而不是?http://example.com/#/user/123。

優點：
- 更美觀的 URL。
- 更符合用戶預期，看起來更像傳統網站的 URL。
- 更好的搜索引擎優化（SEO），因為搜索引擎通常不索引?#?后面的內容。
缺點：
- 需要服務器配置支持。如果服務器不支持，你可能需要對 URL 進行重寫。
- 瀏覽器的前進和后退按鈕可能不會按預期工作，因為?pushState?和?replaceState?API 可能會影響它們的行為。