Named Routes

Watch a free video lesson on Vue School

Alongside the path, you can provide a name to any route. This has the following advantages:

  • No hardcoded URLs
  • Automatic encoding/decoding of params
  • Prevents you from having a typo in the url
  • Bypassing path ranking (e.g. to display a )
  1. const routes = [
  2.   {
  3.     path: '/user/:username',
  4.     name: 'user',
  5.     component: User
  6.   }
  7. ]

To link to a named route, you can pass an object to the router-link component’s to prop:

  1. <router-link :to="{ name: 'user', params: { username: 'erina' }}">
  2.   User
  3. </router-link>

This is the exact same object used programmatically with router.push():

  1. router.push({ name: 'user', params: { username: 'erina' } })

In both cases, the router will navigate to the path /user/erina.

Full example here.