Vue Router 中,params参数的名称必须与路由配置中的动态路径参数名完全一致
路由配置与 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
,导致数据丢失。