Dynamic Routes and Parameters in Vue Router

Dynamic routes are routes that can change based on certain parameters or values.

This allows us to display content and build routes that can adapt to different contents or data (like user profiles, product details).

Defining Parameters in Routes

In Vue Router, route parameters are defined using the : prefix followed by the parameter name. For example:

{ path: '/product/:productId', component: ProductDetails }

Multiple Parameters

It’s also possible to define routes with multiple parameters. For example:

{ path: '/category/:categoryId/product/:productId', component: ProductDetail }

Optional Parameters

Sometimes, it’s useful to define parameters that are not mandatory. For this, we can use the ? symbol after the parameter name. For example:

{ path: '/user/:userId?', component: UserProfile }

Nested Routes

Dynamic routes can also be combined with nested routes to create more complex structures. For example:

const routes = [
  {
    path: '/user/:userId',
    component: UserLayout,
    children: [
      { path: 'profile', component: UserProfile },
      { path: 'settings', component: UserSettings }
    ]
  }
];

In this case, the routes /user/1/profile and /user/1/settings will be available within the UserLayout layout.

Accessing Parameters in Components

Once we have defined a dynamic route, we need to access the parameters in our component to be able to display the corresponding content.

Vue Router provides two main ways to access parameters, depending on whether we are using the Composition API or the Options API.

import { useRoute } from 'vue-router';

export default {
  setup() {
    const route = useRoute();
    const userId = route.params.userId;
    console.log(`User ID: ${userId}`);
    // Here we could make an API call to get the user's data
  }
};

export default {
  name: 'UserProfile',
  created() {
    const userId = this.$route.params.userId;
    console.log(`User ID: ${userId}`);
    // Here we could make an API call to get the user's data
  }
};

Parameter Reactivity

Route parameters are reactive. This means that if the value of a parameter changes (for example, when navigating from /user/1 to /user/2), the component will automatically update.

If you need to perform a specific action when a parameter changes, you can use a watch on the parameter:

<script setup>
import { watch } from 'vue';
import { useRoute } from 'vue-router';

const route = useRoute();

watch(() => route.params.userId, newUserId => {
  console.log(`User ID changed to: ${newUserId}`);
  // API call to get the new user's data
});
</script>

Parameter Validation

In some cases, it’s useful to validate route parameters to ensure they meet certain criteria before rendering the component.

For example, suppose we want to ensure that the userId parameter is a number:

const routes = [
  {
    path: '/user/:userId',
    component: UserProfile,
    props: (route) => ({
      userId: Number(route.params.userId) || 0
    })
  }
];

Practical Examples

const routes = [
  { path: '/profile/:username', component: UserProfile }
];

export default {
  setup() {
    const route = useRoute();
    const username = route.params.username;
    // API call to get the user's data
  }
};

const routes = [
  { path: '/product/:productId', component: ProductDetail }
];

export default {
  setup() {
    const route = useRoute();
    const productId = route.params.productId;
    // API call to get the product details
  }
};