|
1 | 1 | # `<router-link>` |
2 | 2 |
|
3 | | -`<router-link>` ist eine Komponente zum Auslösen von Nutzernavigationen. Die Ziel-Route wird mit der `to`-Prop angegeben. Sie wird standardmäßig als `<a>` mit korrektem `href` Attribut gerendert, das Element kann jedoch mit dem `tag`-Prop geändert werden. Darüberhinaus erhält der Link automatisch die "active" CSS-Klasse, wenn die Ziel-Route gerade aktiv ist. |
| 3 | +`<router-link>` ist eine Komponente zum Auslösen von Nutzernavigationen. Die Ziel-Route wird mit der `to`-Prop angegeben. Sie wird standardmäßig als `<a>` mit korrektem `href` Attribut gerendert, das Element kann jedoch mit dem `tag`-Prop geändert werden. Darüber hinaus erhält der Link automatisch die "active" CSS-Klasse, wenn die Ziel-Route gerade aktiv ist. |
4 | 4 |
|
5 | 5 | `<router-link>` ist aus folgenden Gründen gegenüber fest definierten `<a href="">` links zu bevorzugen: |
6 | 6 |
|
7 | | -- Funktioniert in allen Router-Modi (history, hash, abstract) gleich. Daher muss man nichts ändern, wenn man Modus jemals wechslen muss oder er automatisch in den Hash-Modus für IE9 zurückfällt. |
| 7 | +- Funktioniert in allen Router-Modi (history, hash, abstract) gleich. Daher muss man nichts ändern, wenn man den Modus jemals wechslen sollte oder er automatisch in den Hash-Modus für IE9 zurückfällt. |
8 | 8 |
|
9 | | -- Im HTML5-Verlaufsmodus fängt `router-link` das `click`-Event ab, sodass der Browser nicht versucht das Fenster neu zu laden. |
| 9 | +- Im HTML5-Verlaufsmodus fängt `router-link` das `click`-Event ab, sodass der Browser nicht versucht, das Fenster neu zu laden. |
10 | 10 |
|
11 | 11 | - Wenn die `base`-Option im HTML5-Verlaufsmodus genutzt wird, muss man die Base-URL nicht immer wieder in `to` mit angeben. |
12 | 12 |
|
|
18 | 18 |
|
19 | 19 | - Pflichtfeld |
20 | 20 |
|
21 | | - Kennzeichnet die Ziel-Route des Links. Wenn die Komponente geklickt wird, wird der Wert von `to` intern an `router.push()` übergeben - der Wert kann also wie entweder ein String oder ein Objekt sein kann. |
| 21 | + Kennzeichnet die Ziel-Route des Links. Wenn die Komponente geklickt wird, wird der Wert von `to` intern an `router.push()` übergeben - der Wert kann also entweder ein String oder ein Objekt sein kann. |
22 | 22 |
|
23 | 23 |
|
24 | 24 | ``` html |
|
61 | 61 |
|
62 | 62 | - Default: `false` |
63 | 63 |
|
64 | | - Das Setzen von `append` hängt immer den relativen Pfad an den aktuellen an. Angenommen man navigiert von `/a` zu einem relativen Pfad `b` - ohne `append` gelangt man zu `/b`, mit `append` jedoch wird daraus `/a/b`. |
| 64 | + Das Setzen von `append` hängt immer den relativen Pfad an den aktuellen an. Angenommen, man navigiert von `/a` zu einem relativen Pfad `b` - ohne `append` gelangt man zu `/b`, mit `append` jedoch wird daraus `/a/b`. |
65 | 65 |
|
66 | 66 | ``` html |
67 | 67 | <router-link :to="{ path: 'relative/path'}" append></router-link> |
|
73 | 73 |
|
74 | 74 | - Default: `"a"` |
75 | 75 |
|
76 | | - Manchmal soll `<router-link>` einen anderen Tag rendern, zB. `<li>`. Mit Hilfe des `tag`-Props kann man definieren, welcher tag gerednert werden soll. Der Tag reagiert nach wie vor auf Klick-Events für die Navigation. |
| 76 | + Manchmal soll `<router-link>` einen anderen Tag rendern, zB. `<li>`. Mit Hilfe des `tag`-Props kann man definieren, welcher Tag gerendert werden soll. Der Tag reagiert nach wie vor auf Klick-Events für die Navigation. |
77 | 77 |
|
78 | 78 | ``` html |
79 | 79 | <router-link to="/foo" tag="li">foo</router-link> |
|
120 | 120 |
|
121 | 121 | ### "active" Klasse auf ein äußeres Element anwenden |
122 | 122 |
|
123 | | -Machmal soll die aktive Klasse an ein äußeres Element anstatt an das `<a>` gesetzt werden. In diesem Fall kann man das äußere Element als `<router-link>` rendern und damit den `<a>`-Tag umschließen: |
| 123 | +Machmal soll die aktive Klasse an einem äußeren Element anstelle das `<a>` gesetzt werden. In diesem Fall kann man das äußere Element als `<router-link>` rendern und damit den `<a>`-Tag umschließen: |
124 | 124 |
|
125 | 125 | ``` html |
126 | 126 | <router-link tag="li" to="/foo"> |
|
0 commit comments