R3.01 - dev. web - côté client (vuejs)

   TD n°6 : vue-router

Imprimer
Détails
Catégorie : R3.01 - dev. Web côté client (vuejs)
Affichages : 661

L'archive des sources du premier exemple est téléchargeable [ ici ]

L'archive des source de l'exemple complet est téléchargeable [ ici ]

 1°/ Principes de vue-router

ATTENTION ! Les emplacements d'affichage des composants est le même pour toutes les routes, ce qui constitue une contrainte forte pour structurer le visuel et la navigation dans l'application.

 

 

2°/ Intégration dans un projet

ATTENTION ! Par défaut, les configuration de babel, eslint, ... vont être dispatchées dans différents fichiers. Par exemple, pour configurer eslint, il faut modifier .eslintrc.js

 

 

3°/ Syntaxe basique

3.1°/ Définir une route

 

ATTENTION ! l'ordre dans lequel on définit les route est important. La première rencontrée dont le format correspond à celle que l'on veut suivre est prise.

 

 

{
    path: '/home',
    components: {
      main: Accueil,
      left : Menu
    },
    name: 'home'
}
{
    path: '*',
    components: {
      main: Error404
    }
}

Remarques :

 

3.2°/ Suivre une route

ATTENTION ! Il existe une troisième possibilité inévitable : l'utilisateur peut taper directement une route dans la barre de navigation. C'est une façon simple de mener des attaques contre l'application. Il faut donc coder ses routes (notamment celles avec paramètres) en tenant compte de cette possibilité.

3.2.1°/ <router-link>

<router-link to="/home">Home</router-link>
<router-link :to="{path: '/home'}">Home</router-link>

 

3.2.2°/ $router.push()

<button @click="$router.push({ name: 'useredit', params: { id: user.id, edit_mode: 'reset'} })"> Reset profile of {{user.name}} </button>

 3.2.3°/ requête

<router-link to="/home?msg=hello">

 

3.3°/ Afficher les composants associés à une route.

Bizarrerie : on peut utiliser plusieurs fois <router-view> avec le même attribut name. Cela permet simplement d'afficher plusieurs fois le même composant à plusieurs endroits. Quelle utilité ??

 

3.4°/ Exemple illustratif

 

Démonstration :

Remarque :

 

4°/ Principes avancés

4.1°/ routes multi-niveaux et emplacements imbriqués

{
    path: '/niveau1',
    components: {
      loc1 : componentA
    },
    children: [
      {
        path: 'niveau2.1',
        components: {
          loc2 : componentB
        }
      },
      {
        path: 'niveau2.2',
        components: {
          loc2 : componentC
        }
      }
    ]
}

 

 Remarques :

 

ATTENTION ! il est conseillé d'utiliser des noms d'emplacements différents quel que soit le niveau. En effet, on pourrait très bien utiliser loc1 à la place de loc2 pour le second niveau car vue-router ne mélange pas les emplacements de différents niveaux. Mais avec des noms identiques, c'est bien difficile de s'y retrouver

 

4.2°/ routes paramétrées

4.2.1°/ Création

{
    path: '/users/:id/edit/:edit_mode',
    component: UserEdit,
    name: 'useredit'
}
<template>
   <div>   edit user {{ $route.params.id}} in mode {{$route.params.edit_mode}}  </div>
</template>
...
<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>

Remarques :

 4.2.2°/ Changements de valeurs des paramètres

<div v-if="$route.params.edit_mode=='reset'"><FormReset /></div>
<div v-else><FormEdit /></div>

 

<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.

<template>
    <div>edit user {{id}} in mode {{edit_mode}}</div>
</template>
<script>
  export default {
    name: 'UserEdit',
    props: [ 'id','edit_mode' ]
  }
</script>
{
    path: '/users/:id/edit/:edit_mode',
    name: 'useredit',
    components: {
      locProfile : UserEdit
    },
    props: {
      locProfile : true
    }
}

Exemple solution 3.

<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>
{
    path: '/users/:id/edit/:edit_mode',
    name: 'useredit',
    components: {
      locProfile : UserEdit
    },
    props: {
      locProfile : route => { return {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