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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
|
# Das Route-Objekt
Das **Route-Objekt** repräsentiert den Zustand der aktuell aktiven Route. Es enthält geparste Informationen zur aktuellen URL und den Route-Einträgen, die mit der URL gematched wurden.
Das Route-Objekt ist 'immutable' (unveränderbar). Jede erfolgreiche Navigation resultiert in einem neuen Route-Objekt.
Das Route-Objekt kann an mehreren Orten gefunden werden:
- in Komponenten als `this.$route`
- in `$route`-Watcher-Callbacks.
- als Rückgabewert von `router.match(location)`
- in Navigation-Guards als die ersten beiden Argumente:
``` js
router.beforeEach((to, from, next) => {
// 'to' und 'from' sind Router-Objekte
})
```
- in der `scrollBehavior`-Funktion als die ersten beiden Argumente:
``` js
const router = new VueRouter({
scrollBehavior (to, from, savedPosition) {
// 'to' und 'from' sind Router-Objekte
}
})
```
### Eigenschaften des Router-Objekts
- **$route.path**
- Typ: `string`
Ein String, der gleich dem Pfad der aktuellen Route ist immer als absoluter Pfad ausgegeben wird, zB. `"/foo/bar"`.
- **$route.params**
- Typ: `Object`
Ein Objekt, welches Schlüssel/Wert-Paare von Stern- und dynamischen Segmenten enthält. Gibt es keine Parameter, ist der Wert ein leeres Objekt.
- **$route.query**
- Typ: `Object`
Ein Objekt, welches Schlüssel/Wert-Paare des Query-Strings enthält. Für den Pfad `/foo?user=1` erhält man zum Beispiel `$route.query.user == 1`. Gibt es kein Query, ist der Wert ein leeres Objekt.
- **$route.hash**
- Typ: `string`
Der Hash der aktuellen Route (mit `#`). Gibt es keinen Hash, ist dessen Wert ein leerer String.
- **$route.fullPath**
- Typ: `string`
Die voll umgewandelte URL inklusive Abfrage und Hash.
- **$route.matched**
- Typ: `Array<RouteRecord>`
Ein Array von **Route-Einträgen** für alle verschachtelten Pfadsegmente der aktuellen Route. Route-Einträge sind Kopien der Objekte im Array der `routes`-Konfiguration (und deren `children`-Arrays):
``` js
const router = new VueRouter({
routes: [
// das folgende Objekt in ein Route-Eintrag
{ path: '/foo', component: Foo,
children: [
// das ist auch ein Route-Eintrag
{ path: 'bar', component: Bar }
]
}
]
})
```
Wenn die URL `/foo/bar` ist, ist `$route.matched` ein Array, welches beide geklonten Objekte von Parent nach Child sortiert enthält.
- **$route.name**
Der Name der aktuellen Route, sofern vorhanden. Siehe [Benannte Routes](../essentials/named-routes.md).
|
