Passing props to Vue.js components instantiated by Vue - router

When developing Single Page Applications (SPAs) with Vue.js and Vue Router, we frequently encounter the need to pass data as props from the router to components. This approach enhances component reusability and maintainability because components receive data via props rather than directly extracting from the router state. Below, I will detail how to implement this functionality in Vue Router with an example.

Step 1: Define Routes and Components

First, declare the props you expect to receive in your Vue component. For example, suppose we have a component called UserProfile that requires a userId prop:

vue
<template>
  <div>
    User ID is: {{ userId }}
  </div>
</template>

<script>
export default {
  props: ['userId']
}
</script>

Step 2: Configure Vue Router

In the Vue Router configuration, correctly set up the routes to pass this prop. There are several approaches:

Method 1: Boolean Mode

If you directly pass route parameters as props to the component, use props: true in the route configuration. This instructs Vue Router to automatically pass route parameters as props to the component.

javascript
import VueRouter from 'vue-router';
import UserProfile from './components/UserProfile.vue';

const router = new VueRouter({
  routes: [
    { path: '/user/:userId', component: UserProfile, props: true }
  ]
});

Method 2: Object Mode

For static values or values derived from $route, use object mode:

javascript
{ path: '/user/:userId', component: UserProfile, props: { default: true, sidebar: false } }

Method 3: Function Mode

The most flexible method uses function mode to generate props based on the current route ($route):

javascript
{ path: '/user/:userId', component: UserProfile, props: route => ({ userId: route.params.userId }) }

Example

Suppose we have a user information page with a URL like /user/123, where 123 is the user ID. We want to pass this ID to the UserProfile component. With the boolean mode configuration above, when a user accesses /user/123, the UserProfile component automatically receives the userId prop as 123.

Summary

This approach decouples routes and components, making them more independent and testable. Additionally, it preserves the clarity and intuitiveness of the component interface, enabling other developers to understand and use these components more easily.