Redirect and Alias — Transcript

Transcript of the free Vue.js lesson Redirect and Aliaswatch the video lesson.

We already saw how we can conditionally redirect one route to another in the global before each route guard. In this lesson though, let's see how we can handle more route specific redirects. For instance, let's say that when a user visited slash home, that we want them to be redirected to the homepage instead of getting a four oh four. Well, we can do that by adding a new route at the path of slash home, and then providing a redirect property like this.

If we go back to the browser now and try to visit slash home, sure enough, we're redirected to the home page. Nice. OK, back in the code, we could also give redirect an object with a route name like this. And that would work just the same.

Lastly, we could even provide a function to redirect that receives the route being navigated to. Then whatever we return from the function would determine where the page goes. Of course, just returning this static string isn't very useful, but we could add conditions and so on based on the value of two. That's not necessary for our use case, so let's just take it back to the static value.

All right, a topic closely related to redirects are aliases. What are aliases? Well, with aliases, we can still get the redirect functionality, except without the URL changing. In other words, we can have the URL continue to say slash home, but still show the home page.

Okay, so to use an alias, I'll remove our slash home route, and then instead provide slash home as an alias on the home page route. Now, if I were to go back over to the browser, and visit slash home, you can see the root home page, but the URL still says slash home. Sweet.