Combine parameters from URL with props object in Vue router config

Question

Here is my router config.

const router = new VueRouter({
  routes: [
   {
      path: '/user/:id',
      components: User,
      props: {
        sidebar: true 
      }
    }
  ]
})

I can't access to all props (e.g sidebar and id), only sidebar in this config.

Any ideas ?

Decade Moon · Accepted Answer · 2017-12-19 02:56:05Z

9

If I understand you correctly, you want to set the prop sidebar to true (static) and the prop id to the :id URL parameter (dynamic).

You'll have to use a function which takes the route as a parameter and returns the prop values you want to set on the component:

props: route => ({
  id: route.params.id,
  sidebar: true,
})

Have a look at Function Mode in the vue-router docs for more information.

answered Dec 19, 2017 at 2:56

Decade Moon

34.4k8 gold badges84 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sean Beck Over a year ago

Is this still possible if you have multiple components and need to pass different sets of props to different named components?

samayo · Accepted Answer · 2017-12-18 13:41:24Z

0

You can access route path and params like this:

this.$route.path or

this.$route.params.id

from within your function, computed props or your template

answered Dec 18, 2017 at 13:41

samayo

16.5k13 gold badges95 silver badges115 bronze badges

4 Comments

Adrien Castagliola Over a year ago

Is there any other way ? From Vue's doc, it seems to be not the best way to do it.

samayo Over a year ago

Do you want to pass ` props: { sidebar: true }` to User component?

Adrien Castagliola Over a year ago

i do, i need it in my User component.

samayo Over a year ago

can you check jsfiddle.net/ow85z2n8/1 ? I can get the id in the template

Collectives™ on Stack Overflow

Combine parameters from URL with props object in Vue router config

2 Answers 2

1 Comment

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related