Combine pros from url and props object in Vue router config

问题

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 ?

回答1:

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.

回答2:

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

来源：https://stackoverflow.com/questions/47869676/combine-pros-from-url-and-props-object-in-vue-router-config