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 /:

const routes = [{ path: '/home', redirect: '/' }]

The redirect can also be targeting a named route:

const routes = [{ path: '/home', redirect: { name: 'homepage' } }]

Or even use a function for dynamic redirecting:

const routes = [
  {
    // /search/screens -> /search?q=screens
    path: '/search/:searchText',
    redirect: to => {
      // the function receives the target route as the argument
      // we return a redirect path/location here.
      return { path: '/search', query: { q: to.params.searchText } }
    },
  },
  {
    path: '/search',
    // ...
  },
]

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

Experimental router

In the experimental router, a route record redirect must return a named location or an absolute path. To keep params, query, or hash, copy them from to. Relative redirects returned by navigation guards resolve against to.

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

const routes = [
  {
    // will always redirect /users/123/posts to /users/123/profile
    path: '/users/:id/posts',
    redirect: to => {
      // the function receives the target route as the argument
      return to.path.replace(/posts$/, 'profile')
    },
  },
]

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:

const routes = [{ path: '/', component: Homepage, alias: '/home' }]

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:

const routes = [
  {
    path: '/users',
    component: UsersLayout,
    children: [
      // this will render the UserList for these 3 URLs
      // - /users
      // - /users/list
      // - /people
      { path: '', component: UserList, alias: ['/people', 'list'] },
    ],
  },
]

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

const routes = [
  {
    path: '/users/:id',
    component: UsersByIdLayout,
    children: [
      // this will render the UserDetails for these 3 URLs
      // - /users/24
      // - /users/24/profile
      // - /24
      { path: 'profile', component: UserDetails, alias: ['/:id', ''] },
    ],
  },
]

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

✨Vibe code Vue apps with confidence

RuleKit