Redirect and Alias

Redirect

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

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: '/b' }
  ]
})

The redirect can also be targeting a named route:

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: { name: 'foo' }}
  ]
})

Or even use a function for dynamic redirecting:

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: to => {
      // the function receives the target route as the argument
      // return redirect path/location here.
    }}
  ]
})

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

For other advanced usage, checkout the example (opens new window).

Alias

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

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

The above can be expressed in the route configuration as:

const router = new VueRouter({
  routes: [
    { path: '/a', component: A, alias: '/b' }
  ]
})

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.

For advanced usage, check out the example (opens new window).