3°/ Syntaxe basique
3.1°/ Définir une route
- Exemple :
{
path: '/home',
components: {
main: Accueil,
left : Menu
},
name: 'home'
}
{
path: '*',
components: {
main: Error404
}
}
3.2°/ Suivre une route
3.2.1°/ <router-link>
- Exemples (en se basant sur les routes définies précédemment) :
<router-link to="/home">Home</router-link>
<router-link :to="{path: '/home'}">Home</router-link>
3.2.2°/ $router.push()
- Exemple (on suppose qu'il est placé dans un composant ayant une variable/props user) :
<button @click="$router.push({ name: 'useredit', params: { id: user.id, edit_mode: 'reset'} })"> Reset profile of {{user.name}} </button>
3.2.3°/ requête
- Exemple :
<router-link to="/home?msg=hello">- Dans le template du composant affiché, {{ $route.query.msg }} permettra d'afficher hello.
3.4°/ Exemple illustratif
- Soit un site pédagogique avec des bannières en haut et bas, un menu sur la gauche, et une page centrale. Le contenu de la page centrale et des bannières change en fonction des clics sur le menu =>
-
- chaque item de menu correspond à une route différente.
- tous les composants sont affichés à l'emplacement de la page centrale.
- Dans App.vue :
<template>
<div>
<BannerUp />
<table>
<tr>
<td><Menu /> </td>
<td><MainPage /> </td>
</tr>
</table>
<BannerDown />
</div>
</template>- Dans BannerUp.vue :
<template>
<div>
<router-link to="/home"><img src="/logo.png"></router-link>
<hr /> <router-view name="locUp" /> <hr />
</div>
</template>
...- Dans BannerDown.vue :
<template>
<div>
<router-view name="locDown" />
contact : toto_at_pedago.com
</div>
</template>
...- Dans MainPage.vue :
<template>
<div>
<router-view name="locCentral" />
</div>
</template>
...- Dans Menu.vue :
<template>
<div>
<ul>
<li v-for="it in menuItems"><router-link :to="it.dest">{{it.name}}</router-link></li>
</ul>
</div>
</template>
<script>
...
data : () => {
return {
menuItems: [ { name:"Home", dest:"/home"}, {name:"Algo", dest:"/cours/algo"}, {name:"Java", dest:"/cours/java"} ]
}
}
...
</script>- Dans router/index.js, on aurait par exemple :
const routes = [
{
path:'/home',
components: {
locCentral : Home,
locUp : News,
locDown : Contact
}
},
{
path:'/cours/:matiere',
components: {
locCentral : Cours,
locUp : InfoCours,
}
}
]
4°/ Principes avancés
4.1°/ routes multi-niveaux et emplacements imbriqués
- Exemple :
- App.vue contient dans son template <router-view name="loc1">.
- componentA.vue contient dans son template <router-view name="loc2">.
- quand on suit la route /niveau1, on veut afficher componentA dans l'emplacement loc1.
- quand on suit la route /niveau1/niveau2.1, on veut afficher componentA dans loc1 ET componentB dans loc2.
- quand on suit la route /niveau1/niveau2.2, on veut afficher componentA dans loc1 ET componentC dans loc2.
- Dans router/index.js, on met :
{
path: '/niveau1',
components: {
loc1 : componentA
},
children: [
{
path: 'niveau2.1',
components: {
loc2 : componentB
},
{
path: 'niveau2.2',
components: {
loc2 : componentC
}
]
}
4.2°/ routes paramétrées
4.2.1°/ Création
- Exemple : dans index.js
{
path: '/users/:id/edit/:edit_mode',
component: UserEdit,
name: 'useredit'
}- dans UserEdit.vue :
<template>
<div> edit user {{ $route.params.id}} in mode {{$route.params.edit_mode}} </div>
</template>
...- dans un composant permettant de suivre la route useredit :
<router-link to="/user/23/edit/reset">User profile reset</router-link>
<router-link :to="{ name:'useredit', params: { id:23, edit_mode:'reset'} }">User profile reset</router-link>
4.2.2°/ Changements de valeurs des paramètres
- Exemple, on suppose qu'une route du type /user/:id existe, permettant d'afficher le composant suivant :
<template>
{{user.name}} {{user.age}}
</template>
<script>
export default {
...
data: () => {
return { user: {name:'', age:''} }
},
watch: {
$route(to, from) {
this.user = ... // chercher avec axios les infos de user en fonction de $route.params.id
}
}
}
</script>
4.3°/ Passer des props aux composants
4.3.1°/ via les paramètres d'une route
Exemple solution 1, basé sur les routes paramétrées de la section 4.2.
- Le composant UserEdit.vue devient :
<template>
<div>edit user {{id}} in mode {{edit_mode}}</div>
</template>
<script>
export default {
name: 'UserEdit',
props: [ 'id','edit_mode' ]
}
</script>- router/index.js contient :
{
path: '/users/:id/edit/:edit_mode',
name: 'useredit',
components: {
locProfile : UserEdit
},
props: {
locProfile : true
}
}
Exemple solution 3.
- Cette fois, on suppose que UserEdit.vue a déjà été écrit comme suivant :
<template>
<div>
<h3>{{title}}</h3>
edit user {{userId}} in mode {{editMode}}
new user name : {{newName}}
</div>
</template>
<script>
export default {
name: 'UserEdit',
props: [ 'title', 'userId','editMode','newName' ]
}
</script>- On suppose également que le format de la route reste le même que précédemment mais qu'une variable rename de query permet de spécifier le nouveau nom (exemple de route : /user/46/edit/chgname?rename=toto)
- Cela donne pour router/index.js :
{
path: '/users/:id/edit/:edit_mode',
name: 'useredit',
components: {
locProfile : UserEdit
},
props: {
locProfile : route => ({title:'User profile', userId: route.params.id, editMode: route.params.edit_mode, newName: route.query.rename })
}
}
4.3.2°/ via <router-view>
<template>
<div>
<router-view name="locCentral" :news="infos" :matieres="matieres"/>
</div>
</template>
<script>
export default {
name: 'MainPage',
data : () => {
return {
infos : "bonjour à tous",
matieres : [ {nom: "Algo"}, {nom: "Java"}]
}
},
...
}
</script>5°/ Exemple complet
- Un exemple qui récapitule tous les concepts abordés est téléchargeable [ ici ].
- L'archive contient uniquement le répertoire src.