Passing Params as Props with Vue Router

In this post you will learn how to do the following:

  • Pass required data on a route change to a route component.
  • Pass optional data on a route change to a route component.
  • Use that same component as a child component that uses required data
  • Use that same component as a child component that users required and optional data

Official Documentation

Out with the old and in with the new.

When I first got started with Vue Router, I had to grab any route parameters from the $route object.

But now we can grab parameters passed on a route change from the component’s props.

From the docs:

// OLD:
const User = {   
    template: '<div>User {{ $route.params.id }}</div>' 
} 
const router = new VueRouter({   
    routes: [     
        { path: '/user/:id', component: User }   
    ] 
})
// NEW:
const User = {   
    props: ['id'],   
    template: '<div>User {{ id }}</div>' 
} 
const router = new VueRouter({   
    routes: [     
        { path: '/user/:id', component: User, props: true }      
    ] 
})

‘props: true’ is important. Remember it.

Why the change?

Again, straight from the documentation:

This allows you to use the component anywhere, which makes the component easier to reuse and test.

Looking at our example above, you can see that if ‘id’ comes in as a prop, I can load that component on a route change or use it as a child component without having to do any extra work.

Here’s a pen to look at:

See the Pen Vue Router Pass Params As Props by Patrick O’Dacre (@patrickodacre) on CodePen.

Less Complicated, More Reusable

This is why I love Vue so much; passing route parameters to props seems like such a small thing, but when you’re creating a real app, this little convenience saves you from writing some pretty ugly code.

What about named views?

Glad you asked.

I use named views more often than not, and if you’re building an app of any size, the same will likely be true for you, too.

The setup is a little different when using named views, but no more difficult.

Here’s the above code snippet rewritten to accommodate named routes:

// NEW:
const User = {   
    props: ['id'],   
    template: '<div>User {{ id }}</div>' 
}
const router = new VueRouter({   
    routes: [     
        // for routes with named views, 
        // you have to define the props option for each named view:
        { path: '/user/:id',
          components: { default: User, sidebar: Sidebar },
          props: { default: true, sidebar: false }     
        }      
    ] 
})

You’ll see I added an example for that in the code pen above, too.

Try This

Now that you’ve had some time to examine the pen, fork it for yourself and experiment a bit…

  • Look at the ‘named’ route I set up. Try switching around the User and the Sidebar component I placed on the named views and see what happens.

change: components: { user_details: User, sidebar: Sidebar },
to this: components: { user_details: Sidebar, sidebar: User },

How can you fix it?

  • Now try adding another parameter to the mix. Try both a required prop and an optional prop. Make sure the component works when used as a route component or as a child component.

Found this helpful?

If this short post has helped you in any way, please let me know.

Comments, questions and constructive feedback are always welcome.


My name is Patrick O’Dacre, and I’m a software developer currently available for new opportunities.

It has been my pleasure to create ground-breaking e-commerce order systems, beautiful sales dashboards, and complex data grids with some incredibly talented people that made sure work never felt like work.

Some of my favorite tools include Vue.js, React.js, Node.js and Laravel, and I’m always excited to learn new things.

I love building great things with great people. Let’s build something great together.