Access route params within route/ subRoutes object in Vuejs

Question

Can anybody tell me if there is a way to access the route params directly inside the route objects?, I need to require different components based on the route object.

router.map({
  '/dashboard/*': {
    component: Home
  },
  '/dashboard/:module': {
    component: Module,
    subRoutes: {
      '/': {
        component: require('./components/'+this.$route.params.module+'.vue')
      },
      '/:tab': {
        component: require('./components/'+this.$route.params.tab+'.vue')
      }
    }
  }
});

jeerbl · Accepted Answer · 2016-09-29 09:07:40Z

3

You can't require one or another component depending on the route parameters directly in the router configuration. What you can do instead is create a wrapper component that will use a component or another depending on the route parameters, as the route parameters are accessible from any components.

As written in the vue-router documentation:

The route object will be injected into every component in a vue-router-enabled app as this.$route, and will be updated whenever a route transition is performed.

Every of your components have access to the current route through this.$route therefore you could do something like this:

<template>
    <component-a v-if="$route.params.param1 === 'a'></component-a>
    <component-b v-if="$route.params.param1 === 'b'></component-b>
</template>

answered Sep 29, 2016 at 9:07

jeerbl

7,9675 gold badges28 silver badges39 bronze badges

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

2 Comments

Posva Over a year ago

As jeerbl said, you should check parameters on the view. However I'd recommend you using a render function instead of a template

Ahmad Over a year ago

Thank you, I was asking because I saw something similar in Voie router github.com/inca/voie-example/blob/master/spa/states/user/…

highFlyingSmurfs · Accepted Answer · 2016-09-29 05:57:21Z

2

I haven't seen the use of $route.params inside the route objects. What you can do though, in your vue you can dynamically load different components based on your $route.params

<component-a v-if="$route.params == 'a'"></component-a>

answered Sep 29, 2016 at 5:57

highFlyingSmurfs

3,0492 gold badges17 silver badges29 bronze badges

Collectives™ on Stack Overflow

Access route params within route/ subRoutes object in Vuejs

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related