Vue通过router-link结合动态路由传递props的实现方案

我配置了如下路由（routes/index.ts）：

{
  path: "/flower/:id",
  name: "SingleFlower",
  component: () => import("@/components/SingleFlower/SingleFlower.vue"),
  meta: { requiresAuth: true },
  props: true 
},

相关组件代码：
在FlowersPage.vue中通过router-link循环渲染flower：

...
<router-link
  v-for="flower in flowersArray"
  :key="flower.id"
  :to="{
    name: 'SingleFlower',
    params: { 
      id: flower.id,
    }, 
    // 👈🏽 我想在此传递其余props，比如flower.name和flower.desc 
  }"
>
  <FlowerCard :flower="flower" />
</router-link>
...

SingleFlower.vue期望接收并使用这些props：

<template>
  <div class="flower-container">
    {{ flower.id }} 
    {{ flower.name }} // 👈🏽 在此使用传递的props
    {{ flower.description }} // 👈🏽 在此使用传递的props
  </div>
</template>

<script setup lang="ts">
  // 👈🏽 如何在此获取router-link传递的props并在模板中使用
</script>

<style lang="scss">
@import "./FlowerPage.scss";
</style>

我尝试过在params中添加name、desc等作为props传递，但并未生效。请问如何实现上述需求？我哪里操作有误？

你之前的问题核心是：params仅对应路由路径中定义的占位符（比如:id），额外添加的属性不会自动转为组件props。下面提供两种可行的实现方式：

方式一：用路由state传递非URL可见数据（推荐） #

这种方式不会把数据暴露在URL中，适合传递完整对象：

1. 修改router-link，把flower对象放到state字段：

// FlowersPage.vue
<router-link
  v-for="flower in flowersArray"
  :key="flower.id"
  :to="{
    name: 'SingleFlower',
    params: { id: flower.id },
    // 传递完整flower对象到state
    state: { flower }
  }"
>
  <FlowerCard :flower="flower" />
</router-link>

2. 在SingleFlower.vue中通过useRoute获取state中的数据：

<template>
  <div class="flower-container">
    {{ flower.id }} 
    {{ flower.name }}
    {{ flower.description }}
  </div>
</template>

<script setup lang="ts">
import { useRoute } from 'vue-router'

const route = useRoute()
// 从路由state中提取传递的flower对象
const flower = route.state.flower
</script>

方式二：用query传递URL可见数据 #

如果需要把数据显示在URL中（比如分享链接时需要携带信息），可以用query：

1. 修改router-link，把额外参数放到query里：

// FlowersPage.vue
<router-link
  v-for="flower in flowersArray"
  :key="flower.id"
  :to="{
    name: 'SingleFlower',
    params: { id: flower.id },
    query: {
      name: flower.name,
      desc: flower.description
    }
  }"
>
  <FlowerCard :flower="flower" />
</router-link>

2. 修改路由配置，用props函数把query参数映射为组件props：

// routes/index.ts
{
  path: "/flower/:id",
  name: "SingleFlower",
  component: () => import("@/components/SingleFlower/SingleFlower.vue"),
  meta: { requiresAuth: true },
  // 自定义props映射规则
  props: (route) => ({
    id: route.params.id,
    name: route.query.name,
    description: route.query.desc
  })
},

3. 在SingleFlower.vue中定义props接收：

<template>
  <div class="flower-container">
    {{ id }} 
    {{ name }}
    {{ description }}
  </div>
</template>

<script setup lang="ts">
defineProps<{
  id: string | number,
  name: string,
  description: string
}>()
</script>

为什么之前的操作无效？ #

当路由设置props: true时，Vue Router只会把**路由路径中定义的动态参数（即:id）**自动转为组件props。你额外加到params里的name、desc不属于路径占位符，因此不会被识别为props传递给组件。

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