Reputation: 1326

Vue router with sub path

I have following component for the url:

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

And it gets opened when I enter localhosst:8080/resetpassword

My question is how to access parameters that are given in that way:

localhost:8080/resetpassword/53c957fe-bbc2-4b32-8ebd-a84d79f7ffd2

I know, that I can access URL paramaters ?key=value with this.$route.query.key in the code. But how do I access parameter /...?

Upvotes: 0

Answers (3)

Reputation: 6853

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

Upvotes: 1

Reputation: 553

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.

Upvotes: 1

Reputation: 62

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

Upvotes: 1