[Vuejs]-How to pass props in vue router

by

2👍

✅

I think you have some misconception about the usage of params in vue-router. Params should be part of the path.

for e.g., if the path setting is like

{
    path: '/register/:id',
    // ...
}

<router-link :to="{ name: 'register', params: { id: 'abc123', isRegisteringMe:'true' }}">Register</router-link> will link the user to register/abc123.

since the path setting is path: '/register/:id',, isRegisteringMe param is not defined and won’t be displayed in the url.

Params should be part of the path. I see a few way you can change this.

  1. use url query for isRegisteringMe. for eg, /register?isRegisteringMe=true ( <router-link :to="{ name: 'register', query: { isRegisteringMe: 'true' }}"). and get the value from $route.query.isRegisteringMe

update:

if you want user to always have isRegisteringMe:true by default
do a redirection in register component’s mounted lifecycle event.

  1. set isRegisteringMe in the app’s state, or preferably in vuex if you are using it. then in register component, get the state and use it accordingly.

hope that this move you towards the right direction.

👤Jacob Goh

Leave a comment