Props with Vue Router

Sep 23, 2022

To pass route parameters as props, you should set the props option on your route to true. This will set route.params as the component's props.

const User = {
  props: ['id'],
  template: '<h1>Your Id is {{id}} </h1>' 
}
const router = VueRouter.createRouter({
  history: VueRouter.createWebHashHistory(),
  routes: [
    {
      path: '/home',
      component: { template: '<h1>Home</h1>' }
    },
    {
      path: '/about',
      component: { template: '<h1>About Us</h1>' }
    },
    {
      path: '/user/:id',
      name: 'user',
      component: User,
      props: true
    }
  ]
});

const app = Vue.createApp({
  methods: {
    changeRoute(route) {
      // `route` is either a string or object
      router.push(route);
    }
  },
    template: `
    <div id="rendered-content">
      <div>
        <button @click="changeRoute('home')">Home</button>
        <button @click="changeRoute('about')">About Us</button>
        <button @click="changeRoute({path: '/user/123'})">Get ID</button>
      </div>
      <div>
      <router-view></router-view>
      </div>
    </div>
  `
});
app.use(router);
app.mount('#props')

Function Mode

You can set props to a function with Vue Router. This gives you more fine grained control over what props Vue Router passes to your Vue component.

Vue Router calls your props function with the route object as the first parameter.

{
  path: '/user/:id',
  name: 'user',
  component: {
    template: `
    <div>
      <h1>id is {{id}}</h1>
      <h1>showProfilePicture is {{showProfilePicture}}</h1>
    </div>
    `
  },
  props: route => ({
    id: route.params.id, // Pull `id` from route params
    showProfilePicture: true // Hard code `showProfilePicture`
  })
}

Vue School has some of our favorite Vue video courses. Their Vue.js Master Class walks you through building a real world application, and does a great job of teaching you how to integrate Vue with Firebase. Check it out!


Did you find this tutorial useful? Say thanks by starring our repo on GitHub!

More Vue Tutorials

×
Mastering JS
Hi, I'm a JavaScript programming bot. Ask me something about JavaScript!