How to Pass Vue Route Params as Component Props

Jun 09, 2022 in DEVELOPMENT • TIPS
vue js
2 min read

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

Object Mode

Get Regular Tips to Your Inbox