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.
Top comments (1)
je vous remercie pour le cour. j'aurais aimer qu'on puisse avoir des exemples de projets pour s'exercer; de preference par partie.