Vue路由跳转时能否通过props传递动态数据？

答案是不能直接通过$router.push的props字段传递动态数据给目标路由组件。

官方支持的路由props场景 #

Vue Router的props配置仅在路由定义层面生效，官方支持两种用法：

• 布尔模式：将路由params自动映射为组件props，需在路由定义中设置props: true。例如：

  { path: '/user/:id', component: User, props: true }
  

  跳转时通过params传参：$router.push({ name: 'User', params: { id: 123 } })，组件就能直接拿到id这个prop。
• 静态props：直接在路由定义中传入固定对象，组件会收到静态的props值，不受跳转参数影响：

  { path: '/user/:id', component: User, props: { value: 123 } }
  

为什么你的示例中props是undefined？ #

你在$router.push里写的props: { value: 1234 }并不是Vue Router官方支持的传参方式，这个字段不会被解析，所以目标组件的value prop自然是undefined。另外你的示例里还有个小错误：Comp2的组件名被写成了Comp1，这也会导致组件识别异常。

动态传参的替代方案 #

如果需要在跳转时传递动态数据，推荐以下几种方式：

1. params + 路由props布尔模式（推荐，参数可映射为props）

修改路由定义，添加参数占位符并开启props: true，跳转时通过params传参：

const Comp1 = Vue.component('Comp1', {
  template: `
  <div>Comp1- <button @click="$router.push({name: 'Comp2', params: { value: 1234 }})">Push to route with props</button>
  </div>`,
});

const Comp2 = Vue.component('Comp2', {
  template: `<div>Comp2 - {{ value }} <button @click="$router.push({name: 'Comp1'})">Go back</button> </div>`,
  mounted() { console.log('Prop value- ', this.value) },
  props: ['value']
});

const router = new VueRouter({
  routes: [{
      path: '/',
      name: "Comp1",
      component: Comp1,
    },
    {
      path: '/comp2/:value',
      name: "Comp2",
      component: Comp2,
      props: true
    }
  ]
});

const app = new Vue({
  el: "#app",
  router,
})

对应的HTML代码：

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/vue-router@3.6.5/dist/vue-router.js"></script>
<div id="app">
  <router-view></router-view>
</div>

2. 使用query参数

无需修改路由定义，跳转时通过query传参，组件从$route.query获取：

// 跳转时
$router.push({ name: 'Comp2', query: { value: 1234 } })

// Comp2组件中获取
mounted() {
  console.log('Query value- ', this.$route.query.value)
}

缺点是参数会暴露在URL中。

3. 状态管理（Vuex/Pinia）

如果参数不想暴露在URL中，可将数据存入状态管理仓库，跳转后组件从仓库中读取数据。

4. 路由元信息（meta）

跳转时通过meta字段传参，组件从$route.meta获取：

// 跳转时
$router.push({ name: 'Comp2', meta: { value: 1234 } })

// Comp2组件中获取
mounted() {
  console.log('Meta value- ', this.$route.meta.value)
}

注意：meta是和路由绑定的，若同一路由多次跳转传不同值，需注意缓存问题，可在路由守卫中更新meta。

关于GitHub Issue的说明 #

你提到的Issue中，官方核心成员明确表示：Vue Router不支持在$router.push中传递props，因为路由的props设计是和路由定义绑定的，动态传参应使用params/query或状态管理方案。

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