Vue.js routeur

Vue.js est un framework javascript réactif, qui est utilisé pour créer des interfaces utilisateur (interfaces utilisateur) et des SPA (applications à page unique) 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 existe une bibliothèque tierce officielle portant le nom de Vue Router pour fournir cette fonctionnalité. En utilisant cette fonctionnalité, nous pouvons naviguer entre les pages Web mais sans recharger. Donc, dans cet article, nous allons voir comment installer et utiliser Vue Router dans Vue.js.

Installation

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

npm installer vue-router

Après une installation réussie, nous devons importer VueRouter dans le fichier principal.js dans le répertoire src également en utilisant la syntaxe suivante

importer Vue depuis 'vue'
importer le routeur de './routeur'
Vue.utiliser (routeur)

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

Mais si vous installez Vue.js en 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églage.

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 router-link et fournissons le lien à l'aide de la prop nommée 'to'. Le lien de routeur fonctionne de la même manière qu'une balise d'ancrage « a ». Il est en fait rendu comme une balise 'a' par défaut. Dans la vue du routeur, nous aurons le composant relatif qui correspond à la route.

Dans le javascript, il faut d'abord enregistrer et importer les composants pour définir leurs routes. Nous supposons que nous avons un composant nommé Comp.vue dans le répertoire views vers lequel nous importerons dans l'index du routeur.js dans le répertoire du routeur et définissez-le comme route.

Pour importer un composant, nous utilisons l'instruction suivante

importer Comp de "… /views/Comp.vue" ;

Après l'importation, nous devons maintenant définir la route et la mapper sur le composant. Comme ça,

routes const = [

chemin: "/",
nom: "Comp",
composant : Comp

] ;

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

routes const = [

chemin: "/",
nom: "Comp",
composant : Comp
,

chemin : "/comp2",
nom : "Comp2",
composant : Comp2

] ;

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

const router = createRouter(
routes // abréviation de 'routes: routes'
);

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

createApp(App)
.utiliser (routeur)
.mount("#app");

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

Nous pouvons désormais pousser les routes par programmation en cliquant sur un bouton ou sur tout ce que vous voulez, au lieu d'utiliser le composant router-link. Par example,

méthodes :
clickFunc()
cette.$routeur.pousser('/à propos de')

Conclusion et résumé

Dans cet article, nous avons appris à installer Vue Router de différentes manières et à utiliser Vue router par programmation en javascript et dans Vue.modèle de js. Nous avons également appris à configurer Vue Router dans un projet existant dans un guide détaillé très simple et étape par étape. Si vous souhaitez en savoir plus sur Vue Router, veuillez visiter Vue Router : Documents officiels.