Optional Parameter on Vue Router

Question

So I have a project Page and when I click in one project I want to go to Project Detail page of that project. so I'm using dynamic routes. I pass as parameters a name(that will show on URL) and Id(that I use to go to my store and get the project, this Id is not showing on URL). Everything is ok, the problem is when I Load the browserinside the project Detail page, I only get name as a parameter and I cant get the Id so because of that I cant match the Id with my vuex because there is no Id.

this is my router-link on parent

<router-link class="project__icon" :project="project" :to="{ name: 'projectDetail', params: {name: project.name.replace(' ', ''), id: project.id} }">

and this is what I do on other page to get my project Id inside Vuex

const projectId = this.$route.params.id; 
    this.project = this.$store.getters.getProject(projectId);

This is what I get when I click on router

http://localhost:8080/project/myprojectName

On my router file I have this

{
 path: '/project/:name',
 name: 'projectDetail',
 component: ProjectDetail,
},

Steven B. · Accepted Answer · 2019-04-24 19:27:56Z

4

I'm not sure why you are binding project to the router-link, shouldn't be necessary.

<router-link class="project__icon" :to="{ name: 'projectDetail', params: {name: project.name.replace(' ', ''), id: project.id} }">

You need to add :id as a parameter to your route. You can mark it optional with a ?.

{
 path: '/project/:name/:id?',
 name: 'projectDetail',
 component: ProjectDetail,
}

Also, if you set props: true you can decouple your component from the router and instead of using this.$route.params.id, your detail component will receive the parameters as props.

{
 path: '/project/:name/:id?',
 name: 'projectDetail',
 component: ProjectDetail,
 props: true,
}

EDIT: You have to have the id in the url if you want to allow refreshing and still keep the id or you have to store it somewhere like localstorage or sessionstorage.

edited Apr 24, 2019 at 19:27

answered Apr 24, 2019 at 19:16

Steven B.

9,4323 gold badges28 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Joao Bairrada Over a year ago

Actually it works but I'll get the id everytime I click on router. ``` localhost:8080/project/myprojectName/0 ``` Actually I found the solution, without knowing why, It's pretty easy, I just need to ``` this.project.id ``` Still dont know how this works because I'm refreashing the page inside the component, but component itself already know the project. Thanks for your hel

Collectives™ on Stack Overflow

Optional Parameter on Vue Router

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related