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

Смотрите бесплатные видео-уроки на Vue School

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

Перенаправление описывается в конфигурации routes. Для перенаправления с /home на /:

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

Перенаправление также может быть направлено на именованный маршрут:

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

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

const routes = [
  {
    // /search/screens -> /search?q=screens
    path: '/search/:searchText',
    redirect: to => {
      // функция получает в качестве аргумента новый маршрут
      // здесь мы возвращаем path/location перенаправления.
      return { path: '/search', query: { q: to.params.searchText } }
    },
  },
  {
    path: '/search',
    // ...
  },
]

Обратите внимание, что хуки навигации не применяются к маршруту, который выполняет перенаправление, а только к конечному маршруту. Например, в приведенном выше примере добавление хука навигации beforeEnter на маршруте /home не сработал бы.

При написании redirect вы можете опустить параметр component, так как его на этот маршрут никогда напрямую не перейдут, и, следовательно, нет компонента для отображения. Единственным исключением являются вложенные маршруты: если у записи маршрута есть свойства children и redirect, он также должен содержать свойство component.

Относительное перенаправление Relative redirecting

Также возможно перенаправление по относительному пути:

const routes = [
  {
    // будет всегда перенаправлять /users/123/posts на /users/123/profile
    path: '/users/:id/posts',
    redirect: to => {
      // функция получает в качестве аргумента конечный маршрут
      // относительное местоположение не начинается с `/`
      // или { path: 'profile'}
      return 'profile'
    },
  },
]

Псевдонимы

Перенаправление означает, что при посещении пользователем /home, URL будет заменен на /, а затем сопоставлен как /. Но что такое псевдоним (alias)?

Псевдоним / для /home означает, что когда пользователь посещает /home, URL остается /home, но он будет сопоставлен так, как будто пользователь посещает /..

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

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

Псевдоним дает вам свободу для сопоставления структуры пользовательского интерфейса с произвольным URL, вместо того чтобы быть ограниченным структурой вложенных маршрутов в конфигурации. Чтобы сделать путь абсолютным во вложенных маршрутах, начните псевдоним с /. Вы даже можете комбинировать и предоставлять несколько псевдонимов в виде массива:

const routes = [
  {
    path: '/users',
    component: UsersLayout,
    children: [
      // это приведет к отображению UserList для этих 3 URL
      // - /users
      // - /users/list
      // - /people
      { path: '', component: UserList, alias: ['/people', 'list'] },
    ],
  },
]

Если маршрут имеет параметры, обязательно включите их в любой абсолютный псевдоним:

const routes = [
  {
    path: '/users/:id',
    component: UsersByIdLayout,
    children: [
      // это приведет к отображению UserDetails для этих 3 URL
      // - /users/24
      // - /users/24/profile
      // - /24
      { path: 'profile', component: UserDetails, alias: ['/:id', ''] },
    ],
  },
]

Примечание о SEO: при использовании псевдонимов обязательно определяйте канонические ссылки.