How can I pass multiple params/props to a router link?

Hi, in our app, we need to pass 2 params/properties in the URL to the page:

/election/1 --> Show the electionOverviewPage with id = 1
/election/1/voter?voterId=5 --> Show the voters page for election with id=1, and pass voterId = 5

What I tried:

{ path: '/election/:id/voter', name: 'voters', component: ElectionVotersPage, props: {voterId: 5} },

which doesn’t work.

http://jsfiddle.net/o8tq1k21/1/

How is this done correctly?

(I cannot use two params since the vuetify tab navigation slider cannot handle it somehow, so I need to pass voterId in the query string)

If you mean you have to pass in voterId as a query param to the route, this is how I would do it:

<router-link :to="{path:'/election/1/voter', query: {voterId: 5}}">/election 1, voter 5</router-link>

 template: '<div>Voter: {{$route.query.voterId}}</div>',

Component ElectionVoterPage modified as follows, and delete props, it is not a child-component

const ElectionVoterPage = { 
template: '<div>Voter: {{voterId}}xx</div>',
computed: {
  voterId: function() {
    return this.$route.query.voterid;
  }
},
}

You can set your route this way

const routes = {
    {
            path: '/election/:id',
            name: 'pathName',
            components: { default: ElectionVotersPage },
            props: {
                default: true
            }
   },

}

<router-link
                :to="{
                  name: 'pathName',
                  params: { id: voterId, voter: voter},
                }"
                
              </router-link>

In your component ElectionVotersPage set props and use the props intead of this.$route

props: [‘id’, “voter”],

Some like this

https://router.vuejs.org/guide/essentials/passing-props.html