Using Vue-router, is there any advantage of using named routes than just using the path directly?

Question

According to official docs

Sometimes it is more convenient to identify a route with a name, especially when linking to a route or performing navigations.

So, how is this can be more convenient?

<router-link :to="{ name: 'user', params: { id: user.id }}">
   {{ user.name }}
</router-link>

vs

<router-link :to="'/user/' + user.id">
   {{ User.name }}
</router-link>

I feel like I'm missing something obvious.

Answer 1

I always use named routes.

The advantage is that you can change the path of the route without needing to change the path in every <router-link> or this.$router.push() call.

It's kind of like the reason why, in programming, we avoid magic values and instead use named constants – we can change the value in one place without needing to find-and-replace all occurrences of the value in our code.

Without using named routes, your code becomes tightly bound to the path of each route, you can't change one without needing to change the other. Named routes makes our code independent of the route paths – it'll work whatever the path of the route ends up being.

Another advantage is we can take advantage of param/query inheritance for nested routes – we don't need to reconstruct the full path, instead we can just pass the name of the child route and Vue will construct the full path with any existing params.

Suppose we have the following routes:

{
  name: 'user',
  path: '/user/:id',
  children: [
    {
      name: 'profile',
      path: 'profile'
    }
  ]
}

and the current route path is /user/1. To go to the profile page, we need to do either:

this.$router.push({ name: 'profile' })

or

this.$router.push('/user/' + this.$route.params.id + '/profile')

The former is simpler and less error prone.