Vue Router passing props to dynamic routes, unclear documentation

Question

I have a ProjectCard component which, among other things, links to a specific ProjectPage component. The ProjectPage is going to have a bunch of different paragraphs, pictures and so on, not wholly relevant for my question.

How do I pass on props to a ProjectPage? The Vue Docs portion on Boolean Mode is incredibly vague and doesn't really tell me anything useful.

My Router index.js file has the prop decoupling that they mention in the docs

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

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

To test things out, I made the ProjectPage.vue component look like this

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

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

And I tried passing on a test string to it from my ProjectCard component like this:

<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>

This will correctly take me to the specified route, eg projects/table. However, the {{ testString }} doesn't render and I can only see the Static text, followed by a portion of the component. There's no errors or warnings in the console.

Checking a ProjectCard component in the Vue debugger, the testString exists nested under to/params/testString:

However, on any of the ProjectPage components, testString is undefined

What am I doing wrong here?

I'm a newbie and having the same problem; agree that the official Vue Router documentation is not clear. — henrykodev

xianshenglu xianshenglu · Accepted Answer · 2020-08-09T11:42:02

what about this

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

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

and

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

As the docs said

params are ignored if a path is provided, which is not the case for query, as shown in the example above.

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

The same rules apply for the to property of the router-link component.

Vue Router passing props to dynamic routes, unclear documentation

1 Answers