Redirect and Alias

Watch a free video lesson on Vue School

Redirect

Redirecting is also done in the routes configuration. To redirect from /home to /:

The redirect can also be targeting a named route:

Or even use a function for dynamic redirecting:

Note that Navigation Guards are not applied on the route that redirects, only on its target. e.g. In the above example, adding a beforeEnter guard to the /home route would not have any effect.

When writing a redirect, you can omit the component option because it is never directly reached so there is no component to render. The only exception are nested routes: if a route record has children and a redirect property, it should also have a component property.

Relative redirecting

It's also possible to redirect to a relative location:

Alias

A redirect means when the user visits /home, the URL will be replaced by /, and then matched as /. But what is an alias?

An alias of / as /home means when the user visits /home, the URL remains /home, but it will be matched as if the user is visiting /.

The above can be expressed in the route configuration as:

An alias gives you the freedom to map a UI structure to an arbitrary URL, instead of being constrained by the configuration's nesting structure. Make the alias start with a / to make the path absolute in nested routes. You can even combine both and provide multiple aliases with an array:

If your route has parameters, make sure to include them in any absolute alias:

Note about SEO: when using aliases, make sure to define canonical links.