Skip to content

Complete guide to

Mastering Pinia

written by its creator

Named Routes

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' }}">

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.

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.

Released under the MIT License.