Перенаправления и псевдонимы

Перенаправления

Перенаправления также определяются в конфигурации маршрутов в опции 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 на маршрут /a не будет иметь никакого эффекта.

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

Псевдонимы

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

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

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

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

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

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