【vuejs】vue-router 路由跳轉參數傳遞詳解和應用場景及技巧

1. Vue2 Router 路由基礎

1.1 路由定義

路由定義是Vue Router中實現頁面路由跳轉的基礎。在Vue2中，路由的定義通常在應用的入口文件或路由配置文件中進行。路由定義涉及到路徑模式（path）、視圖組件（component）以及一些高級配置，如命名視圖、重定向、別名等。

路由模式：路由的路徑模式定義了URL的路徑與組件的映射關系。例如，{ path: '/user/:id', component: User } 表示當URL匹配到 /user/:id 時，將渲染 User 組件，其中 :id 是一個動態參數。
組件映射：每個路由模式都關聯一個組件，當路由被激活時，對應的組件將被渲染。組件可以是一個普通的Vue組件，也可以是一個函數，用于按需加載組件。

1.2 路由跳轉

路由跳轉是SPA（單頁面應用）中頁面更新的核心機制。Vue Router提供了多種方法來實現路由跳轉，包括編程式導航和聲明式導航。

編程式導航：通過調用 router.push(location) 或 router.replace(location) 方法來實現路由跳轉。這種方式可以在JavaScript代碼中根據條件或用戶交互來動態跳轉路由。
```
// 跳轉到 /user/123
router.push('/user/123');
// 替換當前路由，不會留下歷史記錄
router.replace('/user/123');
```
聲明式導航：使用 <router-link> 組件來創建一個鏈接，用戶點擊鏈接時將觸發路由跳轉。這種方式在模板中定義導航鏈接，使得模板和導航邏輯更加清晰。
```

<router-link :to="{ name: 'user', params: { id: 123 }}">User</router-link>
```

在Vue2 Router中，路由跳轉還可以攜帶參數，這些參數可以在目標組件中通過不同的方式獲取。參數傳遞是Vue Router實現組件間通信的重要手段之一。

2. 路由傳參方式

2.1 Query 參數傳參

Query 參數傳參是 Vue Router 中一種常用的傳參方式，它允許開發者在路由跳轉時通過 URL 的查詢字符串（query string）傳遞數據。這種方式的優點是簡單直觀，參數值會直接顯示在 URL 中，便于調試和分享。

基本使用：通過 router-link 的 to 屬性或者 router.push() 方法的 query 選項來傳遞參數。

// 使用 router-link 組件
<router-link :to="{ name: 'search', query: { keyword: 'vue' }}">Search</router-link>// 編程式導航
this.$router.push({ path: '/search', query: { keyword: 'vue' } });

組件中獲取 Query 參數：在目標組件中，可以通過 this.$route.query 訪問到傳遞的參數。
```
created() {const { keyword } = this.$route.query;console.log(keyword); // 輸出 'vue'
}
```
響應 Query 參數變化：可以使用 watch 來監聽 $route.query 的變化，從而響應參數的變化。
```
watch: {'$route.query': function(newQuery, oldQuery) {// 根據新的 query 參數執行操作}
}
```

2.2 Params 動態路由傳參

Params 動態路由傳參是另一種在 Vue Router 中傳遞參數的方式，適用于需要在路徑中直接包含參數的情況。這種方式使得 URL 與資源的標識符直接關聯，提高了 URL 的可讀性。

基本使用：在路由配置中使用冒號 : 定義動態段，然后在跳轉時通過 params 傳遞參數。

// 路由配置
const routes = [{ path: '/user/:id', component: User }
];// 傳遞參數
this.$router.push({ path: `/user/${userId}` });

組件中獲取 Params 參數：在目標組件中，可以通過 this.$route.params 訪問到傳遞的參數。
```
created() {const { id } = this.$route.params;console.log(id); // 輸出用戶 ID
}
```
響應 Params 參數變化：由于使用 Params 傳參時組件可能會被復用，因此需要使用 beforeRouteUpdate 鉤子來響應參數的變化。
```
beforeRouteUpdate(to, from) {// 響應路由參數變化this.fetchUserData(to.params.id);
}
```

避免組件重復使用問題：當使用 Params 傳參時，如果直接通過 path 屬性跳轉，可能會導致 params 被忽略。正確的做法是使用路由的 name 或完整的帶參數的路徑。

// 錯誤的用法
this.$router.push({ path: '/user', params: { id: userId } }); // params 將被忽略// 正確的用法
this.$router.push({ name: 'user', params: { id: userId } });

3. Query 參數傳參詳解

3.1 編程式導航傳參

在 Vue 2 中，編程式導航通常使用 router.push 或 router.replace 方法來實現頁面跳轉，同時可以通過這些方法傳遞查詢參數（query parameters）。查詢參數以鍵值對的形式附加在 URL 的末尾，以 ? 開頭，多個參數之間用 & 分隔。

// 假設有一個 Vue Router 實例 router
// 傳遞單個查詢參數
router.push({ path: '/user', query: { name: 'John Doe' } });// 傳遞多個查詢參數
router.push({ path: '/search', query: { keyword: 'vue', page: 1 } });

在路由的組件中，可以通過 this.$route.query 訪問到這些查詢參數：

export default {created() {const { keyword, page } = this.$route.query;console.log(`Searching for ${keyword} on page ${page}`);}
};

3.2 聲明式導航傳參

聲明式導航使用 <router-link> 組件來創建一個帶有導航鏈接的 <a> 元素。通過 to 屬性傳遞目標路由的路徑和查詢參數。

<!-- 在模板中傳遞單個查詢參數 -->
<router-link :to="{ name: 'user', query: { name: 'John Doe' }}">User</router-link><!-- 在模板中傳遞多個查詢參數 -->
<router-link :to="{ path: '/search', query: { keyword: 'vue', page: 1 }}">Search</router-link>

與編程式導航類似，組件內部通過 this.$route.query 訪問查詢參數。這種方式使得 URL 的參數與組件解耦，提高了組件的可重用性和測試性。同時，聲明式導航使得 URL 的結構在模板中清晰可見，有助于維護和理解代碼。

4. Params 動態路由傳參詳解

4.1 動態路由配置

在Vue 2的Vue Router中，動態路由傳參是一種常見的參數傳遞方式，它允許我們將參數嵌入到路由的路徑中。這種方式適用于需要根據參數動態生成頁面內容的場景。

路由定義：在路由配置中，我們使用冒號:來定義動態路由參數。例如，如果我們有一個用戶詳情頁面，需要根據不同的用戶ID來顯示不同的用戶信息，我們可以這樣定義路由：
```
const router = new VueRouter({routes: [{path: '/user/:id', // 動態路由參數component: UserDetail}]
});
```
參數類型：動態路由參數可以是任何字符串，包括字母、數字、下劃線等。但是，它們不能包含斜杠/，因為斜杠用于分隔不同的路由段。
可選參數：如果參數是可選的，可以在參數后面加上?。例如，如果我們想提供一個可選的查詢參數來過濾用戶信息，可以這樣定義：
```
{path: '/users/:page?',component: UserList
}
```
路由匹配優先級：在定義了多個路由的情況下，Vue Router會根據定義的順序來匹配路由。如果有多個路由規則匹配同一個路徑，Vue Router會使用排在前面的路由。

4.2 組件內參數獲取

在組件內部，我們可以通過this.$route.params來訪問動態路由傳遞的參數。

訪問參數：在組件的任何生命周期鉤子或方法中，我們可以使用this.$route.params來獲取路由參數。例如，在UserDetail組件中，我們可以這樣獲取用戶ID：
```
created() {const userId = this.$route.params.id;// 使用userId獲取用戶詳情
}
```
組件屬性模式：Vue Router允許我們將路由參數作為組件的props傳遞。這可以通過在路由配置中設置props: true來實現，從而使得組件的props直接接收路由參數：
```
{path: '/user/:id',component: UserDetail,props: true
}
```
然后在UserDetail組件中，我們可以直接使用id prop：
```
export default {props: ['id']
};
```
命名視圖和子組件：對于包含命名視圖的路由，我們需要為每個命名視圖單獨配置props選項。對于子組件，我們可以通過this.$children來訪問它們，并手動傳遞參數。
參數變化響應：當路由參數發生變化時，Vue Router會自動響應這些變化，并重新渲染組件。這意味著我們可以依賴于Vue的響應式系統來更新UI。
編程式導航：除了在路由定義中使用動態參數外，我們還可以通過編程式導航來動態地改變路由參數。使用router.push或router.replace方法，并傳遞一個包含params的對象，可以實現導航到帶有動態參數的路由：
```
this.$router.push({ name: 'user', params: { id: 123 } });
```

通過上述方式，Vue 2的Vue Router提供了靈活的動態路由傳參機制，使得我們可以構建基于參數的動態頁面，滿足不同的業務需求。

5. 路由傳參的應用場景

5.1 列表過濾

在Vue 2的單頁面應用中，路由傳參在列表過濾功能中扮演著重要角色。通過URL傳遞查詢參數，用戶可以對列表進行動態篩選。例如，在電商平臺的商品列表頁面，用戶可以根據品牌、價格區間或評分等條件進行篩選。

查詢參數的構建與解析：利用query參數，開發者可以在路由跳轉時通過編程式導航this.$router.push或聲明式鏈接<router-link>傳遞篩選條件。在目標組件中，通過this.$route.query獲取傳遞的參數，并應用這些參數進行數據的過濾和展示。
動態組件的復用：通過將篩選參數作為查詢參數傳遞，相同的組件可以根據不同的查詢參數渲染不同的列表視圖，從而提高組件的復用性。
SEO優化：由于查詢參數會顯示在URL中，這有助于搜索引擎優化（SEO），使得頁面可以針對特定的搜索詞被更好地索引。

5.2 詳情頁數據展示

路由傳參在詳情頁的數據展示中也非常關鍵，它允許從導航鏈接中直接傳遞特定的數據標識符，如用戶ID或產品ID。

直接傳遞標識符：在詳情頁路由配置中使用:id這樣的動態路由參數，可以在跳轉時直接通過URL傳遞數據標識符，如/users/123。
組件內部獲取參數：目標組件通過this.$route.params或Composition API中的useRoute()來訪問傳遞的參數，并根據這些參數請求和展示相應的詳情數據。
提高用戶體驗：使用路由傳參可以確保用戶在刷新頁面或直接訪問詳情頁URL時，應用能夠正確地請求和顯示對應的詳情數據，從而提供無縫的用戶體驗。
數據加載狀態管理：在詳情頁組件中，可以使用Vue的響應式系統或狀態管理庫如Vuex來管理數據的加載狀態，確保在數據請求過程中給用戶適當的反饋。

6. 路由傳參的高級技巧

6.1 命名視圖傳參

在Vue Router中，使用命名視圖可以創建具有多個組件的路由，這些組件可以共享相同的路徑但是有不同的視圖。在這種情況下，傳參給命名視圖的子組件需要特別注意。

命名視圖配置：首先，需要在路由配置中定義命名視圖，并為每個子組件指定是否接收路由參數作為props。

const routes = [{path: '/user/:id',name: 'user',components: {default: User,sidebar: Sidebar},props: {default: true, // User組件接收路由參數sidebar: false // Sidebar組件不接收路由參數}}
];

導航至命名視圖：在導航至命名視圖時，可以通過編程式導航或<router-link>組件傳遞參數。

// 編程式導航
this.$router.push({ name: 'user', params: { id: '123' } });// 使用<router-link>組件
<router-link :to="{ name: 'user', params: { id: '123' } }">User</router-link>

在組件中接收參數：在命名視圖中的組件可以通過props接收到路由參數。
```
export default {props: ['id'],template: `<div>User {{ id }}</div>`
};
```

6.2 導航守衛中使用傳參

導航守衛是Vue Router中的一個重要特性，可以在路由跳轉前后執行代碼。在導航守衛中使用傳參可以對路由跳轉進行更細粒度的控制。

全局導航守衛：可以在路由配置的beforeEach鉤子中使用傳參，對所有路由跳轉進行攔截。

router.beforeEach((to, from, next) => {if (to.params.id) {// 執行一些操作，例如數據獲取next(); // 繼續跳轉} else {next('/error'); // 重定向到錯誤頁面}
});

組件內的導航守衛：在路由組件內部，可以使用beforeRouteEnter、beforeRouteUpdate和beforeRouteLeave鉤子來訪問傳參。

export default {beforeRouteEnter (to, from, next) {// 在渲染該組件的對應路由被 confirm 前調用// 不能訪問組件實例，因為當守衛執行前，組件實例還沒被創建next(vm => {// 通過 `vm` 訪問組件實例});},beforeRouteUpdate (to, from, next) {// 當路由發生變化，但是該組件被復用時調用// 比如導航守衛跳轉時，會用到這個守衛},beforeRouteLeave (to, from, next) {// 導航離開該組件的對應路由時調用// 可以訪問組件實例 `this`}
};

使用watch或計算屬性：在組件內部，可以使用watch或計算屬性來響應路由參數的變化。

watch: {'$route' (to, from) {// 對路由變化做出響應}
},
computed: {userId() {return this.$route.params.id;}
}

通過這些高級技巧，可以更靈活地在Vue Router中使用路由傳參，實現復雜的路由邏輯和組件間的數據傳遞。

7. 路由傳參的注意事項

7.1 避免直接依賴 `$route`

在組件中直接使用 $route 會增加組件與路由的耦合度，限制了組件的可重用性。應盡可能使用 props 配置來傳遞路由參數，從而提高組件的靈活性和可測試性。

7.2 命名視圖的 `props` 配置

對于包含命名視圖的路由，需要為每個命名的子組件單獨配置 props。這樣可以確保每個子組件都能接收到正確的參數。

7.3 靜態和動態 `props`

當 props 配置為一個對象時，該對象將直接作為組件的 props 傳入，適用于傳遞靜態數據。而當 props 配置為一個函數時，可以動態地根據路由變化生成 props，適用于需要根據路由參數進行計算的場景。

7.4 監聽路由變化

在使用參數化路由時，由于組件實例可能被復用，因此組件的生命周期鉤子可能不會觸發。需要使用 watch 或導航守衛如 beforeRouteUpdate 來監聽路由參數的變化，并作出相應處理。

7.5 傳遞復雜對象

如果需要傳遞復雜的對象作為參數，可以考慮使用 props 函數模式，將對象序列化為查詢參數（query string）并傳遞，然后在組件內部進行解析。

7.6 避免使用 `v-slot` 傳遞 props

通過 <router-view> 的 v-slot 傳遞 props 會使所有子組件都接收到該 props，這通常不是一個好的實踐，因為它強制所有組件都聲明了可能不需要的 props。

7.7 考慮使用全局狀態管理

對于跨組件的傳參，如果參數在多個組件間共享，可以考慮使用 Vuex 或其他全局狀態管理庫來管理這些參數，而不是依賴于路由傳參。

7.8 注意參數的類型和驗證

在定義 props 時，應該指定參數的類型，并在組件內部進行必要的驗證和處理，以確保數據的正確性和組件的健壯性。

7.9 考慮使用 `params` 還是 `query`

根據參數的使用場景選擇合適的傳參方式。params 適用于動態路由參數，而 query 更適用于非動態的查詢參數，它們在 URL 中的表現也不同。

7.10 刷新頁面時參數的保持

使用 query 傳參時，參數會顯示在 URL 中，刷新頁面時參數不會丟失。而 params 則不會顯示在 URL 中，刷新頁面可能會導致參數丟失，需要額外的機制來保持狀態。

如果這篇文章對你有所幫助，歡迎點贊、分享和留言，讓更多的人受益。感謝你的細心閱讀，如果你發現了任何錯誤或需要補充的地方，請隨時告訴我，我會盡快處理。