Named Routes

Watch a free video lesson on Vue School

When creating a route, we can optionally give the route a name:

const routes = [
  {
    path: '/user/:username',
    name: 'profile', 
    component: User
  }
]

We can then use the name instead of the path when passing the to prop to <router-link>:

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

The example above would create a link to /user/erina.

• See it in the Playground.

Using a name has various advantages:

• No hardcoded URLs.
• Automatic encoding of params.
• Avoids URL typos.
• Bypassing path ranking, e.g. to display a lower-ranked route that matches the same path.

Each name must be unique across all routes. If you add the same name to multiple routes, the router will only keep the last one. You can read more about this in the Dynamic Routing section.

There are various other parts of Vue Router that can be passed a location, e.g. the methods router.push() and router.replace(). We'll go into more detail about those methods in the guide to programmatic navigation. Just like the to prop, these methods also support passing a location by name:

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