Named routes

Named routes are an important feature within Vue Router that can significantly enhance your code's readability and management. They provide a way to identify routes with a unique name, enabling you to navigate through your application seamlessly. But what exactly are named routes, and how do they work in Vue Router?

In this topic, you'll learn about the definition and usage of named routes, how to set them up in a Vue 3 application, and how to navigate to these routes using router-link and programmatically.

Definition and usage of named routes

Named routes in Vue Router are simply routes that have been given a unique name. They provide an alternative way to refer to routes when generating URLs or redirecting, instead of hard coding paths in your application. This results in cleaner, more manageable code. Named routes are especially useful in large applications where route paths can become complex.

Let's look at an example of a standard route without using named routes:

const routes = [
    { path: '/dashboard/user/:id', component: User }
]

In this code snippet, we have a route with the path /dashboard/user/:id that renders the User component. Now, suppose you need to reference this route in different parts of your application. You might do so with a router-link like this:

<router-link to="/dashboard/user/42">User Profile</router-link>

The router-link component is primarily used for declarative navigation, allowing you to create links to your routes in a straightforward manner.

Alternatively, you might reference the route programmatically within a component:

import { useRouter } from 'vue-router'

const router = useRouter()

const navigateToUserProfile = (id) => {
    router.push(`/dashboard/user/${id}`)
}

Here, we're using the router.push method for programmatic navigation, allowing you to navigate to a route as a result of some logic or function in your code.

In both cases, we're hard coding the path to the user profile route. This could become a problem if, for example, you decide to change the path from /dashboard/user/:id to /profile/:id. You would then have to update every instance where you've referenced that path. This can be time-consuming and error-prone, especially in large applications.

This is where named routes come in. Named routes allow you to refer to routes by a unique name, rather than by their path. This means you can change a route's path without having to update every reference to that route in your application.

Setting up named routes

Setting up named routes in Vue 3 is a simple process. By assigning a name property to your route object when defining your routes, you can create named routes that are easier to manage and navigate.

Let's look at how we can convert our previous example to use named routes:

const routes = [
    { path: '/dashboard/user/:id', component: User, name: 'userProfile' }
]

In this example, we've created a named route 'userProfile' for the path /dashboard/user/:id. The path property defines the URL path for the route and the name property assigns a unique name to the route.

This makes it possible to refer to a route by name rather than path in links and redirects.

Navigation with named routes

Now that we have defined a named route, let's see how we can navigate to this route using the router-link component and programmatically using the router.push method.

First, let's look at the router-link component:

<router-link :to="{ name: 'userProfile', params: { id: 42 } }">User Profile</router-link>

In this example, we're using the router-link component to create a link to the 'userProfile' route. We use the :to directive to bind our route name to the router-link. Notice that instead of specifying the path, we pass an object to the :to directive that includes the name of the route and any required route parameters.

Programmatic navigation can be achieved using the router.push method. We can do this as follows:

import { useRouter } from 'vue-router'

const router = useRouter()

const navigateToUserProfile = (id) => {
    router.push({ name: 'userProfile', params: { id } })
}

In this example, we're using router.push to navigate to the 'userProfile' route programmatically. Just like with the router-link component, we pass an object to router.push that includes the name of the route and any required route parameters.

Once we've navigated to the 'userProfile' route, we might want to access the route parameters within the User component. We can do this using the useRoute function from vue-router:

import { useRoute } from 'vue-router'

const route = useRoute()

const userId = route.params.id

Note that with this approach, neither the path nor the parameters are hardcoded inside links and redirects. But how is this better than regular links with path and parameters in the URL?

One of the key advantages of named routes is that if you ever decide to change the path of a route, you only need to change it in one place. For example, if you wanted to change the path from /dashboard/user/:id to /profile/:id, you would only need to update the path property in your route definition:

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

All references to the 'userProfile' route in your application would remain valid, as they refer to the route's name, not its path. This reduces the risk of errors, makes your code easier to maintain, and improves the scalability of your application.

Caveats

While named routes offer a lot of advantages, there are a few potential pitfalls to be aware of. One such pitfall is the possibility of having multiple routes with the same name. In Vue Router, if you define multiple routes with the same name, only the last one defined in the routes array will be used, and the others will be ignored.

Let's look at an example:

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

In this case, the 'user' named route will always refer to the /profile/:id route, and the /user/:id route will be ignored. This could lead to unexpected behavior in your application.

To avoid this, you should ensure that each route in your application has a unique name. This can be particularly challenging in larger applications where different modules or sections might have routes with similar or identical names.

One way to ensure uniqueness of route names is to use namespacing. Namespacing involves prefixing the name of the route with the name of the module or section it belongs to, separated by a dot (.).

For example:

const routes = [
    { path: '/user/:id', component: User, name: 'user.profile' },
    { path: '/admin/:id', component: Admin, name: 'admin.profile' }
]

In this case, even though both routes end with 'profile', they are considered unique because their full names ('user.profile' and 'admin.profile') are different. This approach helps to avoid potential conflicts and keeps your route names organized and easy to manage.

Conclusion

Named routes, a potent feature in Vue Router, significantly enhance code readability and management. By assigning unique names to routes, you can conveniently reference them in URLs or redirects, simply using the route's name instead of its path. This approach simplifies the process of managing and modifying route paths by allowing you to change a route path in one place without having to update all references to that route in the application.

Setting up named routes is straightforward, and navigating to these routes can be done either using the router-link component or programmatically with router.push. However, it's crucial to ensure that each route has a unique name. In cases where multiple routes have the same name, only the last one defined will be used. A possible solution to this problem is to use namespacing, which involves prefixing the name of the route with the name of the module or section it belongs to, separated by a dot (.). This helps to ensure uniqueness of route names and avoid potential conflicts.