Vue Router问题：编程式导航无法传递params参数

我来帮你排查下问题，你遇到的情况主要是两个核心原因导致的：路由规则没声明参数占位符，加上编程式导航的参数传递方式可能有误，咱们一步步解决：

1. 路由规则必须声明参数占位符 #

你当前的/hello路由路径没有定义参数的捕获位置，Vue Router根本不知道要从路径里提取哪个部分作为params参数。需要在path中添加:参数名的占位符，比如:name，这样路由才能识别并解析参数。

2. 编程式导航的参数传递注意事项 #

Vue Router对path和params的组合有严格要求：

• 如果用路由的name属性跳转，可以直接传递params对象，Router会自动把参数拼接到路径中
• 如果直接用path字符串跳转，不能同时传params（会被Router忽略），必须手动把参数拼到path里

修改后的完整代码示例 #

// main.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import App from './App.vue';

// 别忘了注册VueRouter插件！你原代码里可能漏了这一步
Vue.use(VueRouter);

const Hello = { 
  props: ['name'], 
  template: `<h1>Hello {{ name }} (Props接收) | 路由Params: {{ $route.params }} </h1>` 
};
const World = { template: `<h1>World</h1>` };

const routes = [
  // 添加:name占位符，同时props: true会自动把params映射到组件props
  { path: '/hello/:name', name: 'Hello', component: Hello, props: true },
  { path: '/world', component: World }
];

const router = new VueRouter({
  routes
});

new Vue({
  router,
  render: h => h(App)
}).$mount('#app');

正确的编程式导航写法 #

方式1：用路由name传递params（推荐）

// 在任意组件内调用
this.$router.push({ 
  name: 'Hello', 
  params: { name: 'Vue开发者' } 
});

方式2：用path手动拼接参数

this.$router.push(`/hello/Vue开发者`);

这样修改后，你就能正常获取到params参数了，路径跳转和参数传递都会正常工作~

内容的提问来源于stack exchange，提问作者LeBlaireau