路由配置与 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，导致数据丢失。