Vue路由器将道具传递给动态路由，文档不清楚

Question

我有一个ProjectCard组件，除其他外，它链接到特定的ProjectPage组件。 ProjectPage 将有一堆不同的段落、图片等，与我的问题不完全相关。

如何将道具传递给ProjectPage ？ Boolean 模式上的Vue Docs部分非常模糊，并没有真正告诉我任何有用的信息。

我的路由器index.js文件具有他们在文档中提到的道具解耦

import ProjectPage from "@/views/ProjectPage.vue"

const routes = [
    {
        path: "projects/:id",
        component: ProjectPage,
        props: true
    }

为了进行测试，我使ProjectPage.vue组件看起来像这样

<template>
    <div>Static text, followed by {{ testString }}</div>
</template>

<script>
    export default {
        name: "ProjectPage",
        props: {
            testString: String
        }
    };
</script>

我尝试从我的ProjectCard组件向它传递一个测试字符串，如下所示：

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

<script>
    export default {
        name: "ProjectCard",
        props: {
            url: String
        }
    };
</script>

这将正确地将我带到指定的路线，例如projects/table 。 但是， {{ testString }}没有呈现，我只能看到Static text, followed by a一部分。 控制台中没有错误或警告。

在 Vue 调试器中检查ProjectCard组件， testString存在嵌套在to/params/testString下：

但是，在任何ProjectPage组件上， undefined testString

我在这里做错了什么？

Answer 1

那这个呢

import ProjectPage from "@/views/ProjectPage.vue"

const routes = [
    {
        name: 'Project',
        path: "projects/:id",
        component: ProjectPage,
        props: true
    }

和

<template>
    <router-link class="project-link" :to="{ name: `Project`, params: { testString: 'a dynamic string' ,id: url} }" exact>
</template>

正如文档所说

如果提供了路径，则忽略 params，这不是查询的情况，如上面的示例所示。

const userId = '123'
router.push({ name: 'user', params: { userId } }) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123
// This will NOT work
router.push({ path: '/user', params: { userId } }) // -> /user

相同的规则适用于router-link组件的to属性。