VueJS中通过this.$router.push传递props给路由组件失败求助

问题原因 #

当你使用path方式调用$router.push时，传入的props参数不会被Vue Router处理——因为path跳转模式下，路由实例只会解析路径相关配置，忽略props和非动态路由的params参数。而直接在路由数组中设置props: {avatar_url: 'myurl'}属于静态props绑定，会直接传递给组件，因此可以生效。

解决方案 #

方案1：使用路由name配合params传递（推荐）

首先给目标路由添加name属性：

const routes = [
  { path: '/' , redirect: '/login'},
  { path: '/chat', name: 'MyChat', component: MyChat, props: true}, // 添加路由name
  { path: '/login', component: MyLogin},
]

然后修改push调用，用name指定路由，通过params传递参数：

this.$router.push({ name: 'MyChat', params: { avatar_url: 'rrrrrrr' } });

此时路由配置中的props: true会自动把params里的参数映射为组件props，MyChat就能正常接收avatar_url。

方案2：通过query参数传递（适合需要在URL中显示参数的场景）

修改路由配置，将props设为函数，把query参数转为组件props：

const routes = [
  { path: '/' , redirect: '/login'},
  { path: '/chat', component: MyChat, props: route => ({ avatar_url: route.query.avatar_url }) },
  { path: '/login', component: MyLogin},
]

然后用path配合query传递参数：

this.$router.push({ path: '/chat', query: { avatar_url: 'rrrrrrr' } });

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