Learn Quickly: 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:

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 remember to give this a recommendation below and post a brief comment to support me.

Comments, questions and constructive feedback are always welcome.

My name is Patrick O’Dacre, and I’m chief builder at BuildtoLearn.io — a place where growing developers can get more comfortable with full stack development by helping aspiring entrepreneurs build application prototypes.

If you’re interested in full stack JavaScript development and getting more experience with taking a full application from Zero to Production, visit BuildtoLearn.io and sign up for updates.