File: redirect-and-alias.md

package info (click to toggle)
vue-router.js 3.4.9%2Bds-2
  • links: PTS, VCS
  • area: main
  • in suites: bullseye
  • size: 3,212 kB
  • sloc: javascript: 7,982; sh: 22; makefile: 5
file content (60 lines) | stat: -rw-r--r-- 3,020 bytes parent folder | download | duplicates (3)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
# Перенаправления и псевдонимы

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

Перенаправления также определяются в конфигурации маршрутов в опции `routes`. Например, чтобы перенаправить с `/a` на `/b`:

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

Перенаправление может осуществляться и на именованный маршрут:

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

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

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

Обратите внимание, что [навигационные хуки](../advanced/navigation-guards.md) не применяются на маршруте, который служит для перенаправления, только на его цель. В приведённом ниже примере добавление хуков `beforeEnter` на маршрут `/a` не будет иметь никакого эффекта.

Для демонстрации более сложных возможностей, обратите внимание на [этот пример](https://github.com/vuejs/vue-router/blob/dev/examples/redirect/app.js).

## Псевдонимы

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

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

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

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

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

Этот [пример](https://github.com/vuejs/vue-router/blob/dev/examples/route-alias/app.js) демонстрирует более продвинутое использование возможностей.