Vue Router动态路由传递Props失败问题咨询

阿华AIGC实验室

2026-5-8

问题分析与解决方案

你遇到的问题核心是对Vue路由props选项的工作方式理解有偏差——props: true这个配置只会把路由路径中定义的参数（也就是path: "projects/:id"里的:id）映射为组件的props，而你通过router-link的params传递的testString并不是路径参数，所以不会被自动传递到ProjectPage组件中。

下面是具体的修正步骤：

1. 修改路由配置，使用函数式`props`

把路由里的props: true改成函数形式，这样可以手动映射路由对象里所有需要的参数（包括非路径参数）到组件props：

import ProjectPage from "@/views/ProjectPage.vue"
const routes = [
  { 
    name: "ProjectPage", // 给路由添加名称，方便router-link跳转
    path: "projects/:id", 
    component: ProjectPage, 
    // 用函数返回props，把需要的参数从route对象中提取出来
    props: route => ({
      id: route.params.id, // 路径参数id
      testString: route.params.testString // 你自定义的参数
    })
  }
]

2. 修正`ProjectCard`中的`router-link`跳转方式

当你需要传递非路径参数的params时，不能使用path来指定路由——Vue路由规则里，当to对象使用path时，params里的非路径参数会被忽略。必须使用路由的name来跳转：

<template>
  <router-link 
    class="project-link" 
    :to="{ 
      name: 'ProjectPage', // 对应路由里的name属性
      params: { 
        id: url, // 对应路径里的:id参数
        testString: 'a dynamic string' // 要传递的自定义参数
      } 
    }" 
    exact
  >
    <!-- 这里可以添加你的卡片内容 -->
  </router-link>
</template>
<script>
export default {
  name: "ProjectCard",
  props: { url: String }
};
</script>

可选方案：使用查询参数（Query Params）

如果你希望传递的参数在URL中可见（比如projects/table?testString=a+dynamic+string），可以改用query参数，这种方式不需要依赖路由的name，也更直观：

路由配置：

{ 
  name: "ProjectPage",
  path: "projects/:id", 
  component: ProjectPage, 
  props: route => ({
    id: route.params.id,
    testString: route.query.testString // 从query中提取参数
  })
}

`ProjectCard`中的`router-link`：

<router-link 
  class="project-link" 
  :to="{ 
    path: `projects/${url}`, 
    query: { testString: 'a dynamic string' } 
  }" 
  exact
>
</router-link>

为什么原来的方式不生效？

再回顾一下你最初的问题：

props: true仅对路径参数生效，也就是path中用:xxx定义的部分，它会自动把这些参数转为组件props
你传递的testString不是路径参数，所以props: true不会处理它
同时你用path来跳转路由，导致params里的非路径参数被Vue路由忽略，最终ProjectPage的testString就成了undefined