Named Routes — Transcript

Transcript of the free Vue.js lesson Named Routeswatch the video lesson.

Sometimes it is more convenient to identify a route with a name, especially when linking to a route or performing navigations. In fact, it's typically recommended to give all your routes names. That way you can change a route's path without having to update any of the links throughout your code base. js.

In our ViewSchool travel app, we have a destination show page, but there's no way to get to it. Let's use name routes to allow other portions of our app to link to it. In router slash index dot js, we see the route with the path slash destination slash colon ID. Let's give that route record a name property.

We'll call it destination dot show. Over in the home page of the travel application, let's use the route name in the router link. We'll also have to provide the param ID so that we get the details for the proper destination. Great, this works as expected.

Clicking the links takes us to the destination show page. Let's change the path of our details route so that you can see what I mean about how named routes can have their paths changed without updating their links. Let's change slash destination to be slash view school travel out. Now you see that if we click a link, it will go to that page and have View School Travel App in the URL, and we didn't have to do a thing to our router link.

It may not seem so powerful right now with such a small app, but imagine having a bigger app with dozens, hundreds, or even thousands of pages that need to be maintained and updated. On bigger apps, name routes are game changers. So I recommend getting used to using name routes right out of the gate. Let's change the path back to slash destination.

And that's how simple named routes are.