You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/de/advanced/data-fetching.md
+12-12Lines changed: 12 additions & 12 deletions
Original file line number
Diff line number
Diff line change
@@ -1,16 +1,16 @@
1
-
# Datenbeschaffung
1
+
# Daten laden
2
2
3
-
Manchmal müssen Daten von einem Server geladen werden, sobald eine Route aktiviert wird. Zum Beispiel müssen die Inhalte des Nutzers vom Server übertragen werden, bevor ein Nutzerprofil angezeigt werden kann. Dies wird auf zwei Arten erledigt:
3
+
Oftmals Müssen wir Daten von einem Server laden, sobald eine Route aktiviert wird. Zum Beispiel müssen die Daten des Users vom Server geladen werden, bevor das Userprofil angezeigt werden kann. Dies kann auf zwei Arten erreicht werden:
4
4
5
-
-**Laden nach Navigation**: Navigiere zuerst und lade die Daten anschließend in der neuen Komponente. Während der Übertragung kann ein Ladebalken oder ähnliches angezeigt werden.
5
+
-**Laden nach der Navigation**: Der Router schließt zuerst die Navigation ab und wir laden die Daten anschließend in der neuen Komponente. Während der Übertragung kann ein Ladebalken oder ähnliches angezeigt in der Komponente werden.
6
6
7
-
-**Laden vor Navigation**: Lade Daten bevor die Navigation der Route durchgeführt wird und navigiere nachdem die Daten geladen wurden.
7
+
-**Laden der Navigation**: Wir laden Daten bevor die Navigation der Route durchgeführt wird und navigieren danach erst zur neuen Route.
8
8
9
-
Technisch sind beide Optionen möglich - letztendlich hängt es davon ab, welche Benutzererfahrung man erreichen möchte.
9
+
Technisch gesehen sind beide Optionen gleich "gut" - letztendlich hängt es davon ab, welche Benutzererfahrung man erreichen möchte.
10
10
11
-
## Laden nach Navigation
11
+
## Laden nach der Navigation
12
12
13
-
In diesem Fall navigieren und rendern wir die neue Komponente direkt und laden die Daten in der `created`-Funktion der Komponente. Dies ermöglicht es uns den Nutzer zu informieren, dass Daten übertragen werden, während die Inhalte über das Netzwerk nachgereicht werden. Außerdem können wir die Übertragung in jeder Komponente individuell einrichten und sind nicht an ein System gebunden.
13
+
In diesem Fall navigieren und rendern wir die neue Komponente direkt und laden die Daten im `created`-Hook der Komponente. Das ermöglicht es uns dem Nutzer in der neuen Komponente einen Ladebalken oder ähnliches anzuzeigen während der Content vom Server geladen wird. Außerdem können wir so den Ladevorgang in jeder Komponente individuell gestalten.
14
14
15
15
Im folgenden Beispiel haben wir eine `Post`-Komponente, welche Daten für einen Blog-Post basierend auf `$route.params.id` einholt:
16
16
@@ -44,7 +44,7 @@ export default {
44
44
},
45
45
created () {
46
46
// Lade die Daten, wenn die Komponente erstellt wurde und die
47
-
// Daten bereits überwacht werden.
47
+
// Daten bereits observed ("beobachtet") werden.
48
48
this.fetchData()
49
49
},
50
50
watch: {
@@ -55,7 +55,7 @@ export default {
55
55
fetchData () {
56
56
this.error=this.post=null
57
57
this.loading=true
58
-
// Ersetze 'getPost' mit einer beliebigen AJAX-API (zB. fetch, $.ajax).
58
+
// Ersetze 'getPost' mit einem beliebigen AJAX-tool / API-Wrapper
59
59
getPost(this.$route.params.id, (err, post) => {
60
60
this.loading=false
61
61
if (err) {
@@ -69,9 +69,9 @@ export default {
69
69
}
70
70
```
71
71
72
-
## Laden vor Navigation
72
+
## Laden vor der Navigation
73
73
74
-
In diesem Fall werden die Daten geladen, bevor wir in die neue Route navigieren. Die Inhalte werden in dem `beforeRouteEnter`-Schutz der neuen Komponente eingefügt. Die `next`-Funktion wird erst aufgerufen, wenn alles komplett geladen wurde:
74
+
In diesem Fall werden die Daten geladen, bevor wir in die neue Route navigieren. Die Inhalte werden in dem `beforeRouteEnter`-Guard der neuen Komponente geladen. Die `next`-Funktion wird erst aufgerufen, wenn der Vorgang abgeschlossen ist:
75
75
76
76
```js
77
77
exportdefault {
@@ -110,4 +110,4 @@ export default {
110
110
}
111
111
```
112
112
113
-
Der Nutzer bleibt im aktuellen View, bis die Daten des neuen geladen wurden. Daher ist es empfehlenswerteinen Ladebalken oder ähnliches anzuzeigen. Falls die Inhalte nicht komplett beschafft werden können, ist es außerdem von Vorteil, eine Fehlermeldung auszugeben.
113
+
Der Nutzer bleibt im aktuellen View, während die Daten für den neuen View geladen werden. Daher ist es empfehlenswert, derwiel anderswo in der App einen Ladebalken oder ähnliches anzuzeigen. Wenn der Ladevorgang fehlschlägt, ist es außerdem wichtig, eine Fehlermeldung auszugeben.
Wenn Apps mit einem Bundler zusammengefügt werden, kann die Datei recht groß werden und so die Seitenladezeit beeinträchtigen. Es wäre effizienter, wenn man das Bundle in mehrere Router-Komponenten aufteilen könnte und sie nur dann lädt, wenn die Route besucht wird.
3
+
Wenn Apps mit einem Bundler erstellt werden, kann das erzeugte "Bundle" recht groß werden und so die Seitenladezeit beeinträchtigen. Es wäre effizienter, wenn man das Bundle in die einzelnen Router-Komponenten aufteilen könnte und sie nur dann lädt, wenn die Route besucht wird.
4
4
5
-
Mit der Kombination von Vues [asynchronischem Komponenten-Feature](http://vuejs.org/guide/components.html#Async-Components) und Webpacks Feature zur [Code-Aufteilung (englisch)](https://webpack.github.io/docs/code-splitting.html) ist es einfachLazy Loading von Route-Komponenten zu erreichen.
5
+
Mit der Kombination von Vue's Feature für [asynchrone Komponenten](http://vuejs.org/guide/components.html#Async-Components) und Webpack's Feature ["Code-Splitting"](https://webpack.js.org/guides/code-splitting-require/) (engl. _to split_: _teilen_) ist es einfach, dieses "Lazy Loading" genannte Verhalten für Route-Komponenten zu erreichen.
6
6
7
-
Alles was benötigt wird, ist die Definition der Route-Komponenten als asynchrone Komponenten:
7
+
Dazu müssen wir nur unsere Route-Komponenten als asynchrone Komponente definieren:
8
8
9
9
```js
10
10
constFoo=resolve=> {
11
-
// require.ensure ist Webpacks speziale Syntax für Code-Aufteilung.
11
+
// require.ensure ist Webpacks speziale Syntax für Code-Splitting.
12
12
require.ensure(['./Foo.vue'], () => {
13
13
resolve(require('./Foo.vue'))
14
14
})
15
15
}
16
16
```
17
17
18
-
Es gibt auch eine alternative Code-Teilungssyntax mit `require` im AMD-Stil:
18
+
Es gibt auch eine alternative Code-Splitting Syntax mit `require` im AMD-Stil, mit der das ganze Folgendermaßen vereinfacht werden kann:
19
19
20
20
```js
21
21
constFoo=resolve=>require(['./Foo.vue'], resolve)
22
22
```
23
23
24
-
Nichts muss geändert werden in der Route-Konfiguration - nutze`Foo` wie gewohnt:
24
+
In der Route-Konfiguration muss nichts genändert werden - wir nutzen`Foo` wie gewohnt:
25
25
26
26
```js
27
27
constrouter=newVueRouter({
@@ -33,12 +33,12 @@ const router = new VueRouter({
33
33
34
34
### Gruppierung von Komponenten im selben Chunk
35
35
36
-
Manchmal ist es gewollt, alle Komponenten unter der selben Route in den selben ansynchronen Chunk zu gruppieren. Um das zu erreichen, werden [benannte Chunks (englisch)](https://webpack.github.io/docs/code-splitting.html#named-chunks) genutzt. Hierbei wird ein Chunk-Name als drittes Argument für `require.ensure`hinzugefügt.
36
+
Manchmal wollen wir alle Komponenten unter der selben Route in den selben ansynchronen Chunk gruppieren. Dafür benutzern wir das ["named Chunks" (englisch)](https://webpack.js.org/guides/code-splitting-require/#chunkname) Feature, indem wir einen Chunk-Namen als drittes Argument für `require.ensure`hinzugefügen.
Webpack packt alle asynchronen Module mit dem gleichen Chunk-Namen in den selben asynchronen Chunk. Das bedeutet auch, dass keine Abhängigkeiten mehr für `require.ensure` explizit aufgelistet werden müssen - daher der leere Array als Argument.
44
+
Webpack bündelt alle asynchronen Module mit dem gleichen Chunk-Namen in denselben asynchronen Chunk. Das bedeutet auch, dass keine Dependencies mehr für `require.ensure` explizit aufgelistet werden müssen - daher der leere Array als Argument.
Copy file name to clipboardExpand all lines: docs/de/advanced/meta.md
+8-8Lines changed: 8 additions & 8 deletions
Original file line number
Diff line number
Diff line change
@@ -1,6 +1,6 @@
1
-
# Route-Metafelder
1
+
# Route Meta-Felder
2
2
3
-
Man kann ein Metafeld einfügen, wenn die Route definiert wird:
3
+
In der Route-Definition kann man ein Meta-Feld definieren:
4
4
5
5
```js
6
6
constrouter=newVueRouter({
@@ -21,22 +21,22 @@ const router = new VueRouter({
21
21
})
22
22
```
23
23
24
-
Wie greift man auf das `meta`-Feld zu?
24
+
Und wie greifen wir auf das `meta`-Feld zu?
25
25
26
-
Zunächst einmal wird jedes Route-Objekt in der `routes`-Konfiguration **Route-Eintrag** genannt. Route-Einträge können verschachtelt sein. Deswegen kann eine Route zu mehreren Einträgen passen, wenn sie besucht wird.
26
+
Zunächst einmal: Wir nennen jedes Route-Objekt in der `routes`-Konfiguration **Route-Record**. Route-Records können verschachtelt sein, weshalb eine URL potentiell zu mehreren Route-Records passen kann.
27
27
28
-
Zum Beispiel werden mit der obigen Konfiguration und der URL `/foo/bar` beide - Parent-Eintrag und Child-Eintrag - angesprochen.
28
+
Zum Beispiel werden mit der obigen Konfiguration und der URL `/foo/bar` beide - Parent-Record und Child-Record - gematched.
29
29
30
-
Alle Route-Einträge, die auf eine Route zutreffen, sind im `$route`-Objekt und in Route-Objekten im Navigationschutz als`$route.matched`-Array vorzufinden. Deswegen muss eine Schleife auf`$route.matched`angewandt werden, um alle Metafelder im Route-Eintrag zu erhalten.
30
+
Alle Route-Records, die auf eine URL zutreffen, sind im `$route`-Objekt und in den Route-Objekten in Navigation-Guards im`$route.matched`-Array zu finden. Deswegen müssen wir mit einer Schleife das`$route.matched`Array durchlaufen, um alle Route-Records auf Metafelder zu prüfen.
31
31
32
-
Ein Beispiel ist die Prüfung nach einem Metafeld im globalen Navigationsschutz:
32
+
Ein Anwendungsfall ist die Prüfung nach einem Metafeld im globalen Before-Guard:
33
33
34
34
```js
35
35
router.beforeEach((to, from, next) => {
36
36
if (to.matched.some(record=>record.meta.requiresAuth)) {
37
37
// Diese Route benötigt Authentifizierung und prüft,
Der Navigationsschutz bereit gestellt vom `vue-router`wird primär genutzt, um Navigationen vor Umleitung oder Unterbrechung zu schützen. Es gibt eine Vielzahl an Wege: global, per-route oder in der Komponente.
3
+
Wie der Name schon andeutet, werden "navigation guards" `vue-router` primär genutzt, um Navigationen zu "bewachen", indem diese bei Bedarf redirected oder abebrochen werden. Es gibt dabei verschiedene Möglichkeiten, sich in den Navigationsprozess einzuklinken: global, in der Route Definition oder direkt in der Komponente.
4
4
5
-
Merke, dass Parameter oder Query-Abfragen den Navigationsschutz nicht auslosen. Beobachte einfach [das `$route`-Objekt](../essentials/dynamic-matching.md#reacting-to-params-changes), um auf Änderungen zu reagieren.
5
+
Hinweis: Guards werden nicht ausgelöst, wenn du Params oder Querys änderst. Beobachte in diesen Fällen einfach [das `$route`-Objekt](../essentials/dynamic-matching.md#reacting-to-params-changes), um auf Änderungen zu reagieren.
6
6
7
-
### Globaler Schutz
7
+
### Globale Guards
8
8
9
-
Man kann globalen Schutz für die Zeit direkt vor einer Navigation (globaler Vor-Schutz) mit `router.beforeEach`anwenden:
9
+
Man kann globale Before-Guards ("davor-guards") mit `router.beforeEach`registrieren:
Globale Vor-Schutze werden in Kreierungsreihenfolge aufgerufen, wenn eine Navigation ausgelöst wird. Der Schutz darf auch asynchron angewandt werden, sodass die Navigation als **unerledigt** da steht, bis alle bearbeitet wurden.
19
+
Globale Before-Guards werden in der Reihenfolge aufgerufen, in der du sie registriert hast, wann immer eine Navigation ausgelöst wird. Der guard lann auch auch asynchron beendet werden, und die Navigation ist solange im Status **pending**, bis alle bearbeitet wurden.
20
20
21
-
Jede Schutzfunktion erhält drei Argumente:
21
+
Jede Guard Funktion erhält drei Argumente:
22
22
23
23
-**`to: Route`**: das [Route-Objekt](../api/route-object.md), zu dem navigiert wird
24
24
25
25
-**`from: Route`**: die aktuelle Route, von der wegnavigiert wird
26
26
27
-
-**`next: Function`**: Diese Funktion muss aufgerufen werden, um den Hook aufzulösen. Die Aktion hängt von den Argumenten in `next` ab:
27
+
-**`next: Function`**: Diese Funktion muss aufgerufen werden, um den guard zu beenden. Die daraus resultierende Aktion hängt von den Argumenten in `next` ab:
28
28
29
-
-**`next()`**: Gehe zum nächsten Hook in der Leitung. Wenn keiner vorhanden ist, ist die Navigation **bestätigt**.
29
+
-**`next()`**: Gehe zum nächsten guard in der Riehe. Wenn keine mehr vorhanden sind, ist die Navigation **bestätigt**.
30
30
31
-
-**`next(false)`**: Brich die aktuelle Navigation ab. Wurde die URL geändert (entweder manuell durch den Nutzer oder via Zurück-Button), wird es zurückgesetzt zu dem, was die `from`-Route wiedergab.
31
+
-**`next(false)`**: Brich die aktuelle Navigation ab. Wurde die URL geändert (entweder manuell durch den Nutzer oder über den Zurück-Button), wird sie zurückgesetzt auf die der `from`-Route.
32
32
33
-
-**`next('/')` or `next({ path: '/' })`**: Umleitung zu einem anderen Ort. Die aktuelle Navigation wird abgebrochen und eine neue gestartet.
33
+
-**`next('/')` or `next({ path: '/' })`**: Umleitung zu einer anderen Route. Die aktuelle Navigation wird abgebrochen und eine neue gestartet.
34
34
35
-
**Die `next`-Funktion muss immer aufgerufen werden, sonst kann der Hook nicht aufgelöst werden.**
35
+
**Die `next`-Funktion muss immer aufgerufen werden, sonst kann der Guard nicht aufgelöst werden.**
36
36
37
-
Man kann auch globale Nach-Hooks registrieren, allerdings erhalten diese keine `next`-Funktion wie der Navigationsschutz und beeinflussen nicht die Navigation selbst:
37
+
Man kann auch globale After-Guards ("Danach-Guards") registrieren, allerdings erhalten diese keine `next`-Funktion wie der Navigationsschutz und beeinflussen nicht die Navigation selbst:
38
38
39
39
```js
40
40
router.afterEach((to, from) => {
41
41
// ...
42
42
})
43
43
```
44
44
45
-
### Per-Route-Schutz
45
+
### Guards in der Route
46
46
47
-
Man kann den `beforeEnter`-Schutz direkt in der Router-Konfiguration definieren:
47
+
Man kann den `beforeEnter`-Guard direkt in der Router-Konfiguration definieren:
48
48
49
49
```js
50
50
constrouter=newVueRouter({
@@ -60,30 +60,30 @@ const router = new VueRouter({
60
60
})
61
61
```
62
62
63
-
Diese Schutze haben die exakt gleiche Signature als globale Vor-Schutze.
63
+
Diese Guards haben die exakt gleiche Signatur wie globale Before-Guards.
64
64
65
-
### Schutz in Komponenten
65
+
### Guards in Komponenten
66
66
67
-
Letztendlich kann man auch Navigationsschutz in den Route-Komponenten (die, die der Router-Konfiguration hinzugefügt werden) mit `beforeRouteEnter` und `beforeRouteLeave` definieren:
67
+
Zu guter Letzt kann man Guards auch direkt in den Route-Komponenten (die, die der Router-Konfiguration hinzugefügt werden) mit `beforeRouteEnter` und `beforeRouteLeave` definieren:
68
68
69
69
```js
70
70
constFoo= {
71
71
template:`...`,
72
72
beforeRouteEnter (to, from, next) {
73
-
//Aufgerufen bevor die Route bestätigt wird, die die Komponenten rendert.
74
-
// Hat keinen Zugang zum `this`-Kontext der Komponenteninstanz,
75
-
// da es noch nicht erstellt wurde, wenn der Schutz aufgerufen wird.
73
+
//Wird aufgerufen bevor die Route bestätigt wird, die diese Komponenten rendert.
74
+
// Hat keinen Zugriff auf den `this`-Kontext der Komponenteninstanz,
75
+
// da diese noch nicht erstellt wurde, wenn die Guard-Funktion aufgerufen wird.
76
76
},
77
77
beforeRouteLeave (to, from, next) {
78
-
//Aufgerufen, wenn von der Route, die die Komponente rendert, wegnavigiert wird.
78
+
//Wird aufgerufen, wenn von der Route, die diese Komponente rendert, wegnavigiert wird.
79
79
// Hat Zugriff zum `this`-Kontext.
80
80
}
81
81
}
82
82
```
83
83
84
-
Der `beforeRouteEnter`-Schutz hat keinen Zugriff zum `this`-Kontext, weil der Schutz aufgerufen wird, bevor die Navigation bestätigt wurde, demnach wurde die Komponente noch gar nicht kreiert.
84
+
Der `beforeRouteEnter`-Guard hat keinen Zugriff auf den `this`-Kontext, weil der Guard aufgerufen wird, bevor die Navigation bestätigt wurde, weshalb die Komponente noch gar nicht erzeugt wurde.
85
85
86
-
Allerdings hat man Zugriff auf die Instanz, indem man einen Callback an `next`anfügt. Dieser wird aufgerufen, wenn die Navigation bestätigt wurde. Die Komponente wird im Callback als Argument hinzugefügt:
86
+
Allerdings bekommt man Zugriff auf die Instanz, indem man einen Callback an `next`übergibt. Der Callback wird ausgeführt wenn die Navigation bestätigt wurde. Die Komponente wird im Callback als Argument übergeben:
Man kann den `this`-Kontext in `beforeRouteLeave`aufrufen. Der Abgangsschutz wird normalerweise genutzt, um versehentliches Verlassen der Route mit ungesicherten Arbeiten zu verhindern. Die Navigation kann mit `next(false)` abgebrochen werden.
96
+
In `beforeRouteLeave`-Guards kann man den `this`-Kontext aufrufen. Dieser Guard wird normalerweise verwendet, zu verhindern dass ein Benutzer die Route versehentlich verlässt, ohne ungesicherten Arbeit zu speichern. Die Navigation kann mit `next(false)` abgebrochen werden.
0 commit comments