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
|
# Redirect and Alias
## Redirect
Redirecting is also done in the `routes` configuration. To redirect from `/a` to `/b`:
``` js
const router = new VueRouter({
routes: [
{ path: '/a', redirect: '/b' }
]
})
```
The redirect can also be targeting a named route:
``` js
const router = new VueRouter({
routes: [
{ path: '/a', redirect: { name: 'foo' }}
]
})
```
Or even use a function for dynamic redirecting:
``` js
const router = new VueRouter({
routes: [
{ path: '/a', redirect: to => {
// the function receives the target route as the argument
// return redirect path/location here.
}}
]
})
```
Note that [Navigation Guards](../advanced/navigation-guards.md) are not applied on the route that redirects, only on its target. In the example below, adding a `beforeEnter` guard to the `/a` route would not have any effect.
For other advanced usage, checkout the [example](https://github.com/vuejs/vue-router/blob/dev/examples/redirect/app.js).
## Alias
A redirect means when the user visits `/a`, the URL will be replaced by `/b`, and then matched as `/b`. But what is an alias?
**An alias of `/a` as `/b` means when the user visits `/b`, the URL remains `/b`, but it will be matched as if the user is visiting `/a`.**
The above can be expressed in the route configuration as:
``` js
const router = new VueRouter({
routes: [
{ path: '/a', component: A, alias: '/b' }
]
})
```
An alias gives you the freedom to map a UI structure to an arbitrary URL, instead of being constrained by the configuration's nesting structure.
For advanced usage, check out the [example](https://github.com/vuejs/vue-router/blob/dev/examples/route-alias/app.js).
|
