Apprendre Vue.js 3 - Jour 2 : Vue-Router
Tags: french, javascript, vue, beginners
Published: 2021-07-29 11:58:23

---
title: Apprendre Vue.js 3 - Jour 2 : Vue-Router
published: true
description: Voici un résume/aide mémoire de la librairie Vue-Router en Vue.js 3
tags: french, javascript, vue, beginner
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ivcjrlj7x6s1urzzex16.jpeg
series: VueJS
canonical_url: https://www.ericlecodeur.com/apprendre-vuejs-3-jour-2-vue-router 
---
Si vous désirez plus de contenu francophone comme celui-ci, cliquer <strong>Follow<string> ou <a href="https://twitter.com/EricLeCodeur" class="twitter-follow-button">suivez-moi sur Twitter</a>
<hr>
# 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

```bash
npm install vue-router@4

// or vue cli plugin
vue add router
```

### Configuration de VueRouter

Ajouter à main.js

```javascript
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

```html
<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 <router-view></router-view> 

```html
<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

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

Vous pouvez alors lancer le lien à partir du Products component

```html
<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:

```html
<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)

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

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

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

### Route Alias

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

```javascript
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 

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

### Modifier la route dans votre code avec this.$router

```javascript
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

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

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

```javascript
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*

```javascript
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 <route-view>

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