[Vuejs]-Vue router with sub path

1๐Ÿ‘

โœ…

Set your router to:

{
  path: '/resetpassword/:token?',
  name: 'view-resetpassword',
  component: ViewResetPassword,
},

That route now can have optional token param (? is for the optional).
Then you can access it on your component

this.$route.params.token

You can also pass it as a props instead, by adding props: true on the router

{
  path: '/resetpassword/:token?',
  name: 'view-resetpassword',
  component: ViewResetPassword,
  props: true
},

and on your component

export default {
  ...
  props: ["token"];
  ...
}

then you can access the props

this.token
๐Ÿ‘คOwl

1๐Ÿ‘

You can use, like this

{ name: 'Projeto', path: '/projeto/:id', component: Projeto, meta: { public: true } }

with the :(the name), in the component:

this.$route.params.id

In my example is id, but you can put another name

A page to example VueRouter

๐Ÿ‘คMatheus

1๐Ÿ‘

From the docs, proceed as so:

{
  path: '/resetpassword/:id',  // I changed here
  name: 'view-resetpassword',
  component: ViewResetPassword,
}

Then in the matched component, you can access the parameter through $route.params.id.

๐Ÿ‘คDev Yego

Leave a comment