Skip to content

Conversation

Kocal
Copy link
Member

@Kocal Kocal commented May 24, 2017

No description provided.

@Kocal Kocal requested a review from MachinisteWeb May 24, 2017 05:49
Copy link
Member

@MachinisteWeb MachinisteWeb left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Review pour celle là

- Cela fonctionne de la même manière qu'on soit dans le mode historique HTML5 ou le mode hash, donc si vous avez décidé de changer de mode, ou alors que le routeur se replie sur le mode hash pour IE9, rien n'a besoin d'être changé.

- In HTML5 history mode, `router-link` will intercept the click event so that the browser doesn't try to reload the page.
- Dans le mode historique HTML5, `router-link` interceptera l'événement du clic, comme ça le navigateur n'essaiera pas de rafraîchir la page.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

évènement

les deux sont valide mais on garde la réforme de 1990 (ou 1991) je sais plus :D

Denotes the target route of the link. When clicked, the value of the `to` prop will be passed to `router.push()` internally, so the value can be either a string or a location descriptor object.
- requis

Désigne la route cible du lien. Lorsqu'il est cliqué, la valeur de la prop `to` va être passé de manière interne à `router.push`, donc la valeur peut soit être une chaîne de caractères, ou alors un objet décrivant une localisation.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

être passée


<!-- javascript expression using v-bind -->
<router-link v-bind:to="'home'">Home</router-link>
<!-- expression JavaScript en utilisant v-bind -->
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

v-bind

Je notifie l'original


<!-- Omitting v-bind is fine, just as binding any other prop -->
<router-link :to="'home'">Home</router-link>
<!-- Omettre v-bind est ok, tout comme autre prop -->
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

v-bind avec tick

Je PR original

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

une autre prop


<!-- with query, resulting in /register?plan=private -->
<router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>
<!-- avec une requête, résulte en /register?plan=private -->
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

/register?plan=private avec tick

Je PR

- défaut : `"a"`

Sometimes we want `<router-link>` to render as another tag, e.g `<li>`. Then we can use `tag` prop to specify which tag to render to, and it will still listen to click events for navigation.
Parfois, on veut que `<router-link>` soit rendu avec un tag différent, ex : `<li>`. On peut alors utiliser la prop `tag` pour modifier le tag qui sera rendu, et il écoutera toujours aux événements de clic pour la navigation
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

modifier la balise

sera rendue

et elle écoutera toujours les évènements de clic

Le comportement par défaut de la correspondance de classe active est une **correspondance inclusive**. Par exemple, `<router-link to="/a">` vera cette classe appliquée tant que le chemin courant commencera par `/a/` ou `/a`.

One consequence of this is that `<router-link to="/">` will be active for every route! To force the link into "exact match mode", use the `exact` prop:
Une conséquence de cela est que `<router-link to="/">` sera actif pour toutes les routes ! Pour forcer le lien dans un "mode correspondance exacte", utilisez la prop `exact`.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

« mode correspondance exacte »


``` html
<!-- this link will only be active at / -->
<!-- ce lien sera uniquement actif à / -->
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

à /

PR original

- défaut : `'click'`

Specify the event(s) that can trigger the link navigation.
Spécifie les événement(s) que peuvent lancer la navigation de lien.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

les évènement(s) qui peu(ven)t lancer

### Appliquer la classe active à l'élément extérieur

Sometimes we may want the active class to be applied to an outer element rather than the `<a>` tag itself, in that case, you can render that outer element using `<router-link>` and wrap the raw `<a>` tag inside:
Parfois, on voudrait que la classe active soit appliquer à un élément extérieur au lieu de l'élément `<a>` lui-même, dans ce cas, vous pouvez faire le rendu de cet élément extérieur en utilisant `<router-link>` et en entourant le tag `<a>` :
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

soit appliquée

@Kocal
Copy link
Member Author

Kocal commented May 27, 2017

Corrigé ~

Copy link
Member

@MachinisteWeb MachinisteWeb left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Seconde relecture

# `<router-link>`

`<router-link>` is the component for enabling user navigation in a router-enabled app. The target location is specified with the `to` prop. It renders as an `<a>` tag with correct `href` by default, but can be configured with the `tag` prop. In addition, the link automatically gets an active CSS class when the target route is active.
`<router-link>` est le composant pour activer la navigation utilisateur dans une application où le routeur est activé. La localisation cible est spécifiée grâce à la prop `to`. Il est rendu en tant que tag `<a>` avec le `href` correct par défaut, mais peut être configuré grâce à la prop `tag`. De plus, le lien se vera attribuer une classe CSS active lorsque la route cible est active.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

en tant que balise

`<router-link>` est le composant pour activer la navigation utilisateur dans une application où le routeur est activé. La localisation cible est spécifiée grâce à la prop `to`. Il est rendu en tant que tag `<a>` avec le `href` correct par défaut, mais peut être configuré grâce à la prop `tag`. De plus, le lien se vera attribuer une classe CSS active lorsque la route cible est active.

`<router-link>` is preferred over hard-coded `<a href="...">` for the following reasons:
`<router-link>` est préféré par rapport au `<a href="...">` hard-codé pour les raisons suivantes :
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

en dur pour les raisons

ou

en dur dans le code pour les raisons

@Kocal
Copy link
Member Author

Kocal commented May 27, 2017

Modification apportée, tu peux approuver si ça te va

Copy link
Member

@MachinisteWeb MachinisteWeb left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Encore une relecture. Après ça pour moi c'est bon!

- défaut : `"a"`

Sometimes we want `<router-link>` to render as another tag, e.g `<li>`. Then we can use `tag` prop to specify which tag to render to, and it will still listen to click events for navigation.
Parfois, on veut que `<router-link>` soit rendu avec un tag différent, ex : `<li>`. On peut alors utiliser la prop `tag` pour modifier la balise qui sera rendue, et elle écoutera toujours les évènements de clic pour la navigation
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

une balise différente

@MachinisteWeb
Copy link
Member

Après ça pour moi c'est bon @Kocal !

@Kocal
Copy link
Member Author

Kocal commented Jun 2, 2017

Oups, j'avais mis de côté la traduction à cause d'un projet à l'IUT, c'est fixé ~

@MachinisteWeb MachinisteWeb merged commit 854c17e into vuejs-fr:working Jun 2, 2017
@Kocal Kocal deleted the api/router-link.md branch June 2, 2017 06:56
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants