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

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

Перенаправление также выполняется в конфигурации routes. Чтобы перенаправить с /a на /b,:

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

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

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

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

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',
    // ...
  },
]

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

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

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

Также можно перенаправить на относительный URL:

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
      // a relative location doesn't start with `/`
      // or { path: 'profile'}
      return 'profile'
    },
  },
]

Псевдоним

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

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

Это можно выразить в конфигурации маршрутов как:

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

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

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'] },
    ],
  },
]

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

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', ''] },
    ],
  },
]

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