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
# Getting Started (En) <br><br> *Cette page est en cours de traduction française. Revenez une autre fois pour lire une traduction achevée ou [participez à la traduction française ici](https://github.com/vuejs-fr/vue-router).*
1
+
# Pour commencer
2
2
3
-
> We will be using [ES2015](https://github.com/lukehoban/es6features)in the code samples in the guide.
3
+
> Nous utiliserons [ES2015](https://github.com/lukehoban/es6features)dans les exemples de code dans ce guide.
4
4
5
-
Creating a Single-page Application with Vue.js + vue-router is dead simple. With Vue.js, we are already composing our application with components. When adding vue-router to the mix, all we need to do is map our components to the routes and let vue-router know where to render them. Here's a basic example:
5
+
Créer une application monopage avec Vue.js + vue-router est vraiment simple. Avec Vue.js, nous concevons déjà notre application avec des composants. En ajoutant vue-router dans notre application, tout ce qu'il nous reste à faire est de relier nos composants aux routes, et de laisser vue-router faire le rendu. Voici un exemple de base :
6
6
7
-
> All examples will be using the full version of Vue to make template parsing possible. See more details [here](https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only).
7
+
> Tous les exemples utiliseront la version complète de Vue pour rendre l'analyse de template possible. Plus de détails [ici](https://fr.vuejs.org/guide/installation.html#Runtime-Compiler-vs-Runtime-seul).
8
8
9
9
### HTML
10
10
@@ -13,57 +13,57 @@ Creating a Single-page Application with Vue.js + vue-router is dead simple. With
<!-- <router-link> will be rendered as an `<a>` tag by default-->
21
-
<router-linkto="/foo">Go to Foo</router-link>
22
-
<router-linkto="/bar">Go to Bar</router-link>
18
+
<!--utilisez le composant `router-link` pour la navigation. -->
19
+
<!--spécifiez le lien en le passant à la prop `to` -->
20
+
<!-- <router-link> sera rendu en tag `<a>` par défaut-->
21
+
<router-linkto="/foo">Aller à Foo</router-link>
22
+
<router-linkto="/bar">Aller à Bar</router-link>
23
23
</p>
24
-
<!--route outlet-->
25
-
<!--component matched by the route will render here-->
24
+
<!--balise pour le composant router-view-->
25
+
<!--le composant correspondant à la route sera rendu ici-->
26
26
<router-view></router-view>
27
27
</div>
28
28
```
29
29
30
30
### JavaScript
31
31
32
32
```js
33
-
// 0. If using a module system (e.g. via vue-cli), import Vue and VueRouter and then call Vue.use(VueRouter).
33
+
// 0. Si vous utilisez un système de module (ex : via vue-cli), il faut importer Vue et VueRouter et ensuite appeler Vue.use(VueRouter).
34
34
35
-
// 1. Define route components.
36
-
//These can be imported from other files
35
+
// 1. Définissez les composants de route.
36
+
//Ces derniers peuvent être importés depuis d'autre fichier
37
37
constFoo= { template:'<div>foo</div>' }
38
38
constBar= { template:'<div>bar</div>' }
39
39
40
-
// 2. Define some routes
41
-
//Each route should map to a component. The "component" can
42
-
//either be an actual component constructor created via
43
-
//Vue.extend(), or just a component options object.
44
-
//We'll talk about nested routes later.
40
+
// 2. Définissez des routes.
41
+
//Chaque route doit correspondre à un composant. Le « composant » peut
42
+
//soit être un véritable composant créé via `Vue.extend()`, ou juste un
43
+
//objet d'options.
44
+
//Nous parlerons plus tard des routes imbriquées.
45
45
constroutes= [
46
46
{ path:'/foo', component: Foo },
47
47
{ path:'/bar', component: Bar }
48
48
]
49
49
50
-
// 3. Create the router instance and pass the `routes` option
51
-
//You can pass in additional options here, but let's
52
-
//keep it simple for now.
50
+
// 3. Créez l'instance du routeur et passez l'option `routes`.
51
+
//Vous pouvez également passer des options supplémentaires,
52
+
//mais nous allons faire simple pour l'instant.
53
53
constrouter=newVueRouter({
54
-
routes //short for routes: routes
54
+
routes //raccourci pour `routes: routes`
55
55
})
56
56
57
-
//4. Create and mount the root instance.
58
-
//Make sure to inject the router with the router option to make the
59
-
//whole app router-aware.
57
+
//5. Créez et montez l'instance de Vue.
58
+
//Soyez sûr d'injecter le routeur avec l'option `router` pour
59
+
//permettre à l'application tout entière d'être à l'écoute du routeur.
60
60
constapp=newVue({
61
61
router
62
62
}).$mount('#app')
63
63
64
-
//Now the app has started!
64
+
//L'application est maintenant en marche !
65
65
```
66
66
67
-
You can also checkout this example [live](http://jsfiddle.net/yyx990803/xgrjzsup/).
67
+
Vous pouvez aussi regarder cet [exemple](http://jsfiddle.net/yyx990803/xgrjzsup/).
68
68
69
-
Notice that a `<router-link>`automatically gets the `.router-link-active`class when its target route is matched. You can learn more about it in its [API reference](../api/router-link.md).
69
+
Notez qu'un `<router-link>`obtiendra automatiquement la classe `.router-link-active`lorsque sa route cible correspond à la route actuelle. Vous pouvez en apprendre plus à propos de cela dans sa [documentation d'API](../api/router-link.md).
0 commit comments