Si vous désirez plus de contenu francophone comme celui-ci, cliquer Follow ou suivez-moi sur Twitter

Vue Router

Le client side routing

Le client side routing permet de changer l'adresse url du navigateur et de charger une autre page/component Vue sans rafraichir le navigateur. Tout cela est possible grace la librairie VueRouter.

Installation VueRouer v4

npm install vue-router@4

// or vue cli plugin
vue add router

Configuration de VueRouter

Ajouter à main.js

import { createApp } from 'vue'
import App from './App.vue'
import * as VueRouter from 'vue-router'
import Home from './pages/Home.vue'
import About from './pages/About.vue'

const router = VueRouter.createRouter({
history: VueRouter.createWebHistory(),
routes: [
    {
    path: '/',
    name: 'Home',
    component: Home
    },
    {
        path: '/about',
    name: 'About',
    component: About
    }
  ]
})

const app = createApp(App)
app.use(router).mount('#app')
app.mount('app')

RouterView

Ce component est fournie avec la librairie vue-router et agit comme conteneur pour rendre les routes que nous avons définit

App.vue

<router-view></router-view>

RouterLink

Sur clic de cet élément, Vue va faire un render de la route spécifié par le tag 'router-link' et l'attribut 'to='. Le render aura lieu à l'endroit ou vous avez placé votre

<template>
    <div>
        <h1>Home page</h1>
        <router-link to="/about">About</router-link>
    // or
    <router-link :to="{ name: About }">About</router-link>
    </div>
</template>

<script>
    export default {

    }
</script>

<style lang="scss" scoped>

</style>

Route Parameters

Il est possible d'extraire l'information relier au chemin. Comme par exemple le Id d'un produit: /products/id

routes: [
    ...
    ...
    {
        path: '/products/:id',
    name: 'ProductDetails',
    component: ProductDetails
    },
  ]
})

Vous pouvez alors lancer le lien à partir du Products component

<router-link :to="{ name: 'ProductDetails', params: { id: product.id }}">
    See details
</router-link>

Il sera enfin possible de lire ce paramètre à partir du ProductDetail component:

<template>
    The product ID is {{ $route.params.id }}
</template>

Il est possible également de lire ce paramètre comme une Props du component (ex. ProductDetails component)

<template>
    The product ID is {{ idid }}
</template>

<script>
    export default {
        props: ['id'],
    }
</script>

Pour permettre la conversion du paramètre en Props, vous devez mentionner lorsque vous définissez la route.

routes: [
    ...
    ...
    {
    path: '/products/:id',
    name: 'ProductDetails',
    component: ProductDetails,
    props: true,
    },
  ]
})

$route / this.$route

Est un object global qui contient des informations sur la route actuelle:

name
fullPath
path
query
params

Redirection de route

Il est possible de re-directionner une route sur une autre.

routes: [
    ...
    ...
    {
    path: '/about-us',
    redirect: '/about',
    },
  ]
})

Route Alias

Il est possible d'avoir deux routes ui affiche le même component

routes: [
    {
    path: '/',
    name: 'Home',
    component: Home,
    alias: '/home'
    },
  ]
})

'/' et '/home' point vers le même component.

La propriété alias peut également être un tableau ['/home', '/homepage']

Redirection 404

Il est possible de re-directionner une page si la route n'existe pas

routes: [
    ...
    ...
    {
    path: '/:catchAll(.*)',
    name: 'NotFound',
        component: NotFount
    },
  ]
})

Modifier la route dans votre code avec this.$router

methods: {
    resirect() {
        this.$router.push({ name: 'Home' })
    },
    back() {
        this.$router.go(-1)
    // or same thing
    this.$router.back()
    },
    forward() {
        this.$router.go(1)
    // or samwe thing
    this.$router.forward()
    }   
}

Route query

Il est possible de lire les query parameters passé a la route

ex: /products?brand=Apple

<template>
    Filter Brand : {{ $route.query.brand }}
</template>

Il est possible d'appeler une route avec un query parameter

methods: {
    search(brand) {
    this.$router.push({ name: 'Home', query: brand })
    },
}

Si query est égale à undefined alors il n'apparaitra pas la la barre url du navigateur

Nested Routes

Permet de gérer les sous routes. ex: /products/1050/tags

Il faut d'abord définir la sous route avec la propriété children

routes: [
    ...
    ...
    {
    path: '/products/:id',
    name: 'ProductDetails',
    component: ProductDetails,
    props: true,
    children: {
        path: 'tags',
        components: Tags,
    }, 
     },
  ]
})

Dans le component ProductDetails vous pouvez afficher le component tags en utilisant des balise

<template>
  Product no
  {{ $route.params.id }}

  Liste des tags associé au produit
  <router-view></router-view>
</template>

Conclusion

Merci d'avoir lu cet article. Si vous avez aimez ou si vous avez des commentaires n'hésitez pas à les saisir ici bas.

Blog

Apprendre Vue.js 3 - Jour 2 : Vue-Router

Eric Le Codeur