Le Routage Vue.JS et React.JS

Par:

Capture d’écran 2020-11-06 à 11.36.00

Alexandre Ohayon

Développeur Web Junior, l’un de nos Super-héros du digital dans la Team BGS

Peux-tu nous en dire quelque mots?

De base, j’ai commencé sur React JS mais avec BGS, nous travaillons beaucoup plus avec Vue.JS. J’ai donc décidé de faire le comparatif de routage entre Vue. JS et React.JS et comment ils fonctionnent. Car qui sont les deux principaux Framework JavaScript les plus en vogue de nos jours. Il est parfois difficile de les appréhender et de débuter dessus.

C’est quoi un Framework?

C’est une sorte de cadre pour nous faciliter le travail en codage et ici, Vue. JS et React. JS sont deux frameworks appartenant à un routeur JavaScript.

Qu’est-ce qu’un routeur JavaScript?

Un routeur Javascript est un composant clé dans la plupart des frameworks frontend. C’est une partie du logiciel chargé d’organiser les états de l’application, en basculant entre les différentes vues.

Par exemple, le routeur affichera initialement l’écran de connexion, et lorsque la connexion réussira, il effectuera la transition vers l’écran d’accueil de l’utilisateur.

Comment ça fonctionne? Le routeur sera en charge de simuler les transitions entre les documents en surveillant les changements sur l’URL. Lorsque le document est rechargé ou que l’URL est modifiée d’une manière ou d’une autre, il détecte ce changement et affiche la vue associée à la nouvelle URL.

Routage basique

React.JS

Vue.JS

Routage dynamique

React.JS

Vue.JS

Nested-Routing

React.JS

Vue.JS

Link

React.JS

Vue.JS

NavLink

React.JS

NavLink est utilisé pour afficher un style différent lorsque l’URL actuelle correspond au lien.

Vue.JS

Router-link obtient automatiquement la classe .router-link-active lorsque sa route cible correspond

Get Location

React.JS

Vue.JS

Push

React.JS

Vue.JS

Replace

React.JS

Vue.JS

Redirect

React.JS

Vue.JS

Event

React.JS

Vue.JS

Global
By Route
By Component

Scroll

React.JS

Vue.JS

Lazy loading and code splitting

React.JS

Vue.JS

Ta conclusion?

On peut dire qu’évidemment de nombreuses fonctionnalités font défaut: l’utilisation de contrôleurs pour transformer les données avant de les passer aux vues, l’utilisation de l’historique des api, etc.

Mais l’idée de routage JavaScript est assez simple à appréhender. Le code ensemble peut être trouvé dans cet essentiel.