[Vuejs]-Access route params within route/ subRoutes object in Vuejs

by

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>
👤jeerbl

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>
👤highFlyingSmurfs

Leave a comment