Skip to content

Commit 85f20b5

Browse files
PascalAOMSyyx990803
PascalAOMS
authored and
yyx990803
committed
German translation (vuejs#950)
* copied 'en' folder to start 'de' translation * translated to Germn * fixed typo * translated to Germn * added German * changed route matching translation * fixed link * translated to Germn * Daten Laden (data fetching) übersetzt * started German translation * Further translation * further translation * Update getting-started.md * getting started done * translated to German * German translation * German translation * German translation * 'Eigenschaft' is not correct translation of 'Prop' * German translation * German translation * better translation of Component Injection * German translation * German translation * corrected translation for 'Redirection' * German translation * German translation * German translation * German translation * German translation * German translation * German translation * German translation * German translation * translation revision * fix typo * inserted missing word * clearer translation of Data Fetching * full revision * updated to 2.1.0 * fix list formatting * fix gitbook recognizing @ version as email * fix the vue-router.js cdn url * added RU to langs
1 parent 109af45 commit 85f20b5

24 files changed

+1359
-0
lines changed

‎docs/LANGS.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
* [2.0 - English](en/)
22
* [2.0 - Japanese](ja/)
33
* [2.0 - 中文](zh-cn/)
4+
* [2.0 - German](de/)
45
* [2.0 - Русский](ru/)
56
* [0.7 Docs](old/)

‎docs/de/README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
SUMMARY.md

‎docs/de/SUMMARY.md

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
# vue-router 2
2+
3+
<!--email_off-->
4+
> Merke: [email protected] ist nur mit Vue 2.x kompatibel. Dokumentation für 0.7.x ist [hier (englisch)](https://github.com/vuejs/vue-router/tree/1.0/docs/en)
5+
<!--/email_off-->
6+
7+
**[Versionshinweise (englisch)](https://github.com/vuejs/vue-router/releases)**
8+
9+
- [Installation](installation.md)
10+
- Grundlegendes
11+
- [Erste Schritte](essentials/getting-started.md)
12+
- [Dynamisches Route-Matching](essentials/dynamic-matching.md)
13+
- [Verschachtelte Routes](essentials/nested-routes.md)
14+
- [Programmatische Navigation](essentials/navigation.md)
15+
- [Benannte Routes](essentials/named-routes.md)
16+
- [Benannte Views](essentials/named-views.md)
17+
- [Umleitung und Alias](essentials/redirect-and-alias.md)
18+
- [HTML5-Verlaufsmodus](essentials/history-mode.md)
19+
- Fortgeschritten
20+
- [Navigationsschutz](advanced/navigation-guards.md)
21+
- [Route-Metafelder](advanced/meta.md)
22+
- [Übergänge](advanced/transitions.md)
23+
- [Datenbeschaffung](advanced/data-fetching.md)
24+
- [Scroll-Verhalten](advanced/scroll-behavior.md)
25+
- [Lazy Loading](advanced/lazy-loading.md)
26+
- API-Referenz
27+
- [router-link](api/router-link.md)
28+
- [router-view](api/router-view.md)
29+
- [Das Route-Objekt](api/route-object.md)
30+
- [Router-Option](api/options.md)
31+
- [Router-Instanz](api/router-instance.md)
32+
- [Injektion von Komponenten](api/component-injections.md)

‎docs/de/advanced/data-fetching.md

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
# Datenbeschaffung
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:
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.
6+
7+
- **Laden vor Navigation**: Lade Daten bevor die Navigation der Route durchgeführt wird und navigiere nachdem die Daten geladen wurden.
8+
9+
Technisch sind beide Optionen möglich - letztendlich hängt es davon ab, welche Benutzererfahrung man erreichen möchte.
10+
11+
## Laden nach Navigation
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.
14+
15+
Im folgenden Beispiel haben wir eine `Post`-Komponente, welche Daten für einen Blog-Post basierend auf `$route.params.id` einholt:
16+
17+
``` html
18+
<template>
19+
<div class="post">
20+
<div class="loading" v-if="loading">
21+
Lade..
22+
</div>
23+
24+
<div v-if="error" class="error">
25+
{{ error }}
26+
</div>
27+
28+
<div v-if="post" class="content">
29+
<h2>{{ post.title }}</h2>
30+
<p>{{ post.body }}</p>
31+
</div>
32+
</div>
33+
</template>
34+
```
35+
36+
``` js
37+
export default {
38+
data () {
39+
return {
40+
loading: false,
41+
post: null,
42+
error: null
43+
}
44+
},
45+
created () {
46+
// Lade die Daten, wenn die Komponente erstellt wurde und die
47+
// Daten bereits überwacht werden.
48+
this.fetchData()
49+
},
50+
watch: {
51+
// Rufe die Methode erneut auf, wenn sich die Route ändert.
52+
'$route': 'fetchData'
53+
},
54+
methods: {
55+
fetchData () {
56+
this.error = this.post = null
57+
this.loading = true
58+
// Ersetze 'getPost' mit einer beliebigen AJAX-API (zB. fetch, $.ajax).
59+
getPost(this.$route.params.id, (err, post) => {
60+
this.loading = false
61+
if (err) {
62+
this.error = err.toString()
63+
} else {
64+
this.post = post
65+
}
66+
})
67+
}
68+
}
69+
}
70+
```
71+
72+
## Laden vor Navigation
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:
75+
76+
``` js
77+
export default {
78+
data () {
79+
return {
80+
post: null,
81+
error: null
82+
}
83+
},
84+
beforeRouteEnter (to, from, next) {
85+
getPost(to.params.id, (err, post) => {
86+
if (err) {
87+
// Zeige eine globale Fehlermeldung.
88+
next(false)
89+
} else {
90+
next(vm => {
91+
vm.post = post
92+
})
93+
}
94+
})
95+
},
96+
// Wenn die Route geändert und die Komponente bereits gerendert wurde,
97+
// ist der Aufbau etwas anders:
98+
watch: {
99+
$route () {
100+
this.post = null
101+
getPost(this.$route.params.id, (err, post) => {
102+
if (err) {
103+
this.error = err.toString()
104+
} else {
105+
this.post = post
106+
}
107+
})
108+
}
109+
}
110+
}
111+
```
112+
113+
Der Nutzer bleibt im aktuellen View, bis die Daten des neuen geladen wurden. Daher ist es empfehlenswert einen Ladebalken oder ähnliches anzuzeigen. Falls die Inhalte nicht komplett beschafft werden können, ist es außerdem von Vorteil, eine Fehlermeldung auszugeben.

‎docs/de/advanced/lazy-loading.md

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
# Lazy Loading
2+
3+
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.
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 einfach Lazy Loading von Route-Komponenten zu erreichen.
6+
7+
Alles was benötigt wird, ist die Definition der Route-Komponenten als asynchrone Komponenten:
8+
9+
``` js
10+
const Foo = resolve => {
11+
// require.ensure ist Webpacks speziale Syntax für Code-Aufteilung.
12+
require.ensure(['./Foo.vue'], () => {
13+
resolve(require('./Foo.vue'))
14+
})
15+
}
16+
```
17+
18+
Es gibt auch eine alternative Code-Teilungssyntax mit `require` im AMD-Stil:
19+
20+
``` js
21+
const Foo = resolve => require(['./Foo.vue'], resolve)
22+
```
23+
24+
Nichts muss geändert werden in der Route-Konfiguration - nutze `Foo` wie gewohnt:
25+
26+
``` js
27+
const router = new VueRouter({
28+
routes: [
29+
{ path: '/foo', component: Foo }
30+
]
31+
})
32+
```
33+
34+
### Gruppierung von Komponenten im selben Chunk
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.
37+
38+
``` js
39+
const Foo = r => require.ensure([], () => r(require('./Foo.vue')), 'group-foo')
40+
const Bar = r => require.ensure([], () => r(require('./Bar.vue')), 'group-foo')
41+
const Baz = r => require.ensure([], () => r(require('./Baz.vue')), 'group-foo')
42+
```
43+
44+
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.

‎docs/de/advanced/meta.md

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
# Route-Metafelder
2+
3+
Man kann ein Metafeld einfügen, wenn die Route definiert wird:
4+
5+
``` js
6+
const router = new VueRouter({
7+
routes: [
8+
{
9+
path: '/foo',
10+
component: Foo,
11+
children: [
12+
{
13+
path: 'bar',
14+
component: Bar,
15+
// ein Metafeld
16+
meta: { requiresAuth: true }
17+
}
18+
]
19+
}
20+
]
21+
})
22+
```
23+
24+
Wie greift man auf das `meta`-Feld zu?
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.
27+
28+
Zum Beispiel werden mit der obigen Konfiguration und der URL `/foo/bar` beide - Parent-Eintrag und Child-Eintrag - angesprochen.
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.
31+
32+
Ein Beispiel ist die Prüfung nach einem Metafeld im globalen Navigationsschutz:
33+
34+
``` js
35+
router.beforeEach((to, from, next) => {
36+
if (to.matched.some(record => record.meta.requiresAuth)) {
37+
// Diese Route benötigt Authentifizierung und prüft,
38+
// ob man eingeloggt ist.
39+
// Wenn nicht, Umleitung zur Login-Seite.
40+
if (!auth.loggedIn()) {
41+
next({
42+
path: '/login',
43+
query: { redirect: to.fullPath }
44+
})
45+
} else {
46+
next()
47+
}
48+
} else {
49+
next() // Rufe immer next() auf.
50+
}
51+
})
52+
```

‎docs/de/advanced/navigation-guards.md

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
# Navigationsschutz
2+
3+
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.
4+
5+
### Globaler Schutz
6+
7+
Man kann globalen Schutz für die Zeit direkt vor einer Navigation (globaler Vor-Schutz) mit `router.beforeEach` anwenden:
8+
9+
``` js
10+
const router = new VueRouter({ ... })
11+
12+
router.beforeEach((to, from, next) => {
13+
// ...
14+
})
15+
```
16+
17+
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.
18+
19+
Jede Schutzfunktion erhält drei Argumente:
20+
21+
- **`to: Route`**: das [Route-Objekt](../api/route-object.md), zu dem navigiert wird
22+
23+
- **`from: Route`**: die aktuelle Route, von der wegnavigiert wird
24+
25+
- **`next: Function`**: Diese Funktion muss aufgerufen werden, um den Hook aufzulösen. Die Aktion hängt von den Argumenten in `next` ab:
26+
27+
- **`next()`**: Gehe zum nächsten Hook in der Leitung. Wenn keiner vorhanden ist, ist die Navigation **bestätigt**.
28+
29+
- **`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.
30+
31+
- **`next('/')` or `next({ path: '/' })`**: Umleitung zu einem anderen Ort. Die aktuelle Navigation wird abgebrochen und eine neue gestartet.
32+
33+
**Die `next`-Funktion muss immer aufgerufen werden, sonst kann der Hook nicht aufgelöst werden.**
34+
35+
Man kann auch globale Nach-Hooks registrieren, allerdings erhalten diese keine `next`-Funktion wie der Navigationsschutz und beeinflussen nicht die Navigation selbst:
36+
37+
``` js
38+
router.afterEach((to, from) => {
39+
// ...
40+
})
41+
```
42+
43+
### Per-Route-Schutz
44+
45+
Man kann den `beforeEnter`-Schutz direkt in der Router-Konfiguration definieren:
46+
47+
``` js
48+
const router = new VueRouter({
49+
routes: [
50+
{
51+
path: '/foo',
52+
component: Foo,
53+
beforeEnter: (to, from, next) => {
54+
// ...
55+
}
56+
}
57+
]
58+
})
59+
```
60+
61+
Diese Schutze haben die exakt gleiche Signature als globale Vor-Schutze.
62+
63+
### Schutz in Komponenten
64+
65+
Letztendlich kann man auch Navigationsschutz in den Route-Komponenten mit `beforeRouteEnter` und `beforeRouteLeave` definieren:
66+
67+
``` js
68+
const Foo = {
69+
template: `...`,
70+
beforeRouteEnter (to, from, next) {
71+
// Aufgerufen bevor die Route bestätigt wird, die die Komponenten rendert.
72+
// Hat keinen Zugang zum `this`-Kontext der Komponenteninstanz,
73+
// da es noch nicht erstellt wurde, wenn der Schutz aufgerufen wird.
74+
},
75+
beforeRouteLeave (to, from, next) {
76+
// Aufgerufen, wenn von der Route, die die Komponente rendert, wegnavigiert wird.
77+
// Hat Zugriff zum `this`-Kontext.
78+
}
79+
}
80+
```
81+
82+
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.
83+
84+
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:
85+
86+
``` js
87+
beforeRouteEnter (to, from, next) {
88+
next(vm => {
89+
// Zugriff auf Komponenteninstanz via 'vm'
90+
})
91+
}
92+
```
93+
94+
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.

0 commit comments

Comments
 (0)