I have a ProjectCard ponent which, among other things, links to a specific ProjectPage ponent. 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",
        ponent: ProjectPage,
        props: true
    }

To test things out, I made the ProjectPage.vue ponent 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 ponent 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 ponent. There's no errors or warnings in the console.

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

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

What am I doing wrong here?

I have a ProjectCard ponent which, among other things, links to a specific ProjectPage ponent. 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",
        ponent: ProjectPage,
        props: true
    }

To test things out, I made the ProjectPage.vue ponent 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 ponent 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 ponent. There's no errors or warnings in the console.

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

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

What am I doing wrong here?

• javascript
• vue.js
• vuejs2
• vue-router

• I'm a newbie and having the same problem; agree that the official Vue Router documentation is not clear. – henrykodev Commented Jul 31, 2021 at 5:36

1 Answer 1

what about this

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

const routes = [
    {
        name: 'Project',
        path: "projects/:id",
        ponent: 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 ponent.