Vue.routeur JS

Vue.JS est un framework JavaScript réactif, qui est utilisé pour créer des UIS (interfaces utilisateur) et des spas (applications à une page) et les développeurs aiment coder et ressentir la liberté et le confort tout en développant des applications dans Vue.js. À des fins de routage, Vue.JS ne fournit pas la fonction de routage intégrée. Mais il y a une bibliothèque tierce officielle avec le nom du routeur Vue pour avoir fourni cette fonctionnalité. En utilisant cette fonctionnalité, nous pouvons naviguer entre les pages Web mais sans recharger. Donc, dans cet article, nous allons voir comment nous pouvons installer et utiliser Vue Router dans Vue.js.

Installation

Nous pouvons installer le routeur Vue dans un Vue existant.JS Project en exécutant la commande suivante dans le terminal

Installation de NPM Vue-Router

Après une installation réussie, nous devons importer Vuerouter dans l'ensemble.Fichier JS dans le répertoire SRC également en utilisant la syntaxe suivante

Importer Vue à partir de «Vue»
Importer un routeur de './ routeur '
Vue.Utilisation (routeur)

Après avoir importé le routeur, vous êtes prêt à utiliser Vue-Router dans votre projet.

Mais si vous installez Vue.js utilisant Vue CLI. Vous n'aurez pas besoin de cette étape d'installation supplémentaire. Vous pouvez ajouter un plugin Vue-Router lors de la sélection d'un préréglé.

Usage

L'utilisation du Vue-Router est très simple et facile à utiliser. Tout d'abord, dans le modèle ou HTML

Dans cet exemple assez simple et clair de Vue-Router. Nous avons créé une navigation simple à l'aide de composants de routeur-link et fournissons le lien à l'aide de l'hélice nommé «à». Le routeur-lien fonctionne de la même manière qu'un ancre 'a' tag. Il est en fait rendu comme une balise «A» par défaut. Dans la vue du routeur, nous aurons le composant relatif qui correspond à l'itinéraire.

Dans le javascript, nous devons d'abord inscrire et importer les composants pour définir leurs itinéraires. Nous supposons que nous avons un composant nommé Comp.Vue dans le répertoire des vues auquel nous importerons dans l'index du routeur.Fichier JS dans le répertoire du routeur et le définir comme un itinéraire.

Pour importer un composant, nous utilisons l'instruction suivante

Importez des composés à partir de "… / vues / comp.Vue ";

Après l'importation, nous devons définir l'itinéraire maintenant et le cartographier vers le composant. Comme ça,

constants constants = [

chemin: "/",
Nom: "Comp",
Composant: comp

]]

Nous pouvons également donner plusieurs itinéraires, séparés par une virgule. Comme ça,

constants constants = [

chemin: "/",
Nom: "Comp",
Composant: comp
,

Chemin: "/ Comp2",
Nom: "Comp2",
Composant: Comp2

]]

Après avoir défini les itinéraires. Passer les routes Array vers les instances du routeur. Alors, créons également l'instance de routeur

const Router = Createrouter (
Routes // abréviation pour les «routes: routes»
);

En fin de compte, dans l'ensemble.fichier js. Nous devons créer l'instance racine et monter également et y injecter les itinéraires afin que toute l'application prenne conscience des itinéraires.

createApp (app)
.Utilisation (routeur)
.Mount ("# app");

En utilisant cette technique d'injection. Nous pouvons accéder au routeur dans n'importe quel composant, en utilisant ce.$ routeur.

Nous pouvons maintenant appuyer sur les itinéraires par programme sur le clic d'un bouton ou de tout ce que vous voulez, au lieu d'utiliser le composant Router-Link. Par exemple,

Méthodes:
clickfunc ()
ce.$ routeur.push ('/ à propos')

Enveloppement et résumé

Dans cet article, nous avons appris à installer Vue Router en utilisant différentes manières et appris à utiliser le routeur Vue par programmation en JavaScript et dans la Vue.modèle de JS. Nous avons également appris à configurer le routeur Vue dans un projet existant dans un guide détaillé très facile et étape par étape. Si vous voulez en savoir plus sur le routeur Vue, veuillez visiter Vue Router: Docs officiel.