DEV Community

Cover image for Apprendre Vue.js 3 - Jour 2 : Vue-Router
 Eric Le Codeur
Eric Le Codeur

Posted on • Edited on • Originally published at ericlecodeur.com

14 3

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

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
Enter fullscreen mode Exit fullscreen mode

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')

Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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
    },
  ]
})
Enter fullscreen mode Exit fullscreen mode

Vous pouvez alors lancer le lien à partir du Products component

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

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

<template>
    The product ID is {{ $route.params.id }}
</template>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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,
    },
  ]
})
Enter fullscreen mode Exit fullscreen mode

$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',
    },
  ]
})
Enter fullscreen mode Exit fullscreen mode

Route Alias

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

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

'/' 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
    },
  ]
})
Enter fullscreen mode Exit fullscreen mode

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()
    }   
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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

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

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,
    }, 
     },
  ]
})
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (1)

Collapse
 
hermann_tchouotchedjomfo profile image
Hermann TCHOUOTCHEDJOM FOMO • Edited

je vous remercie pour le cour. j'aurais aimer qu'on puisse avoir des exemples de projets pour s'exercer; de preference par partie.

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay