redirect-and-alias.md

Редиректы и псевдонимы

Редирект

Редиректы также определяются в конфигурации путей routes. Для редиректа с /a на /b, укажите:

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

В качестве цели редиректа можно использовать и именованный путь:

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

Можно даже указать функцию для организации динамического редиректа:

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: to => {
      // в функцию в качестве аргумента передаётся путь
      // возвращаемым значением должна быть строка или объект пути
    }}
  ]
})

Обратите внимание, что сторожевые хуки не применяются на маршруте, который служит для перенаправления, только на его цель. В приведённом ниже примере добавление хуков beforeEnter или beforeLeave на маршрут /a не будет иметь никакого эффекта.

Для демонстрации более сложных возможностей, обратите внимание на этот пример.

Псевдонимы

При редиректе, если пользователь переходит по пути /a, URL заменяется на /b и затем уже /b рассматривается как основной путь. В чём отличие псевдонима?

В случае, когда псевдонимом /a является /b, при посещении пользователем /b URL останется равным /b, но роутер выполнит все действия так, как если бы он был равен /a.

В виде конфигурации роутера вышесказанное может быть выражено так:

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

Псевдонимы позволяют не ограничиваться вложенными структурами при организации связи URL и UI.

Этот пример демонстрирует более продвинутое использование возможностей.