How to Pass Vue Route Params as Component Props

If you’re using vues router to link to dynamic URLs you may get stuck wondering why your props on router-links aren’t being sent to your components. Vue’s router doesn’t support sending props directly. So you can’t do something like this:

<router-link
  class="..."
  :to="{
     path: `/user/edit/`,
     id=id
   }"
   >Edit
</router-link>

Here the id prop will never get passed in routers default configuration. Instead you need to configure each of your routes to pass the route params as props like so:

<router-link
  class="..."
  :to="{
     path: `/user/edit/${id}`
   }"
   >Edit
</router-link>
const UserEdit = {
  props: ['id'],
  template: '<div>Edit User {{ id }}</div>'
}

const routes = [{ 
	path: '/user/edit/:id', 
  component: UserEdit, 
  props: true 
}]

This way, the id comes through as a prop to our component without an issue. Router allows this to avoid tight coupling between components and route params.

Object Mode

It’s also possible to define the props value for a route to be an object or function like this:

const routes = [{ 
	path: '/user/edit/:id', 
  component: UserEdit, 
  props: {
		sidebar: true
	} 
}]
const routes = [{ 
	path: '/search', 
  component: UserSearch, 
  props: {
		sidebar: route => ({ query: route.query.q })
	} 
}]

For more info check out vues router documentation:

https://router.vuejs.org/guide/essentials/passing-props.html

Get Regular Tips to Your Inbox

My newsletter comes out every few weeks and is stuffed with helpful stories, tools and code showing how developers like yourself ship efficiently. It also features articles and videos I've recently published so you'll never miss out.

No spam, unsubscribe any time. Check out previous issues here.