路由配置與 params 參數的綁定關系

在路由配置中，使用?冒號（:）?定義動態路徑參數：

// router.js（路由配置）

{

path: '/search/:keyword', // 這里的:keyword是動態路徑參數

name: 'Search',

component: SearchComponent

}

當使用?命名路由?傳遞params時，參數名必須與路由配置中的參數名（如keyword）一致：

// 正確：params參數名與路由配置中的:keyword匹配

this.$router.push({

name: 'Search',

params: { keyword: this.keyword } // 參數名必須是keyword

});

2. 為什么必須保持一致？

Vue Router 通過?參數名?來匹配路由配置中的動態路徑參數。如果名稱不匹配，會導致以下問題：

• 路徑無法正確生成：
  例如，若路由配置為/search/:keyword，但傳遞的params是{ query: 'vue' }，則生成的路徑為/search/undefined（因為沒有匹配到keyword參數）。

• 參數無法正確傳遞：
  在目標組件中，$route.params.keyword將為undefined，導致數據丟失。