Vue Router

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 )
const routes = [
  {
    path: '/user/:username',
    name: 'user',
    component: User
  }
]

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

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

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

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

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

Full example here.