带有子路径的Vue路由器

Question

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 /... ?

Answer 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 exampleVueRouter

Answer 2

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 .

Answer 3

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