Cet article vous montrera les fonctionnalités intéressantes de Vue Router4

Cet article vous fera connaître les fonctionnalités intéressantes de Vue Router4. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Vue Router 4 est sorti, jetons un coup d'œil aux fonctionnalités intéressantes incluses dans la nouvelle version. [Recommandations associées : "Tutoriel vue.js"]

Vue3 prend en charge

Vue 3 a introduit l'API createApp, qui a modifié A moyen d'ajouter des plugins à une instance Vue. Par conséquent, les versions précédentes de Vue Router ne seront pas compatibles avec Vue3.

Vue Router 4 introduit l'API createRouter, qui crée une instance de routeur qui peut être installée dans Vue3.

// src/router/index.js

import { createRouter } from "vue-router";

export default createRouter({
  routes: [...],
});

rrree

Option Historique

Dans les versions antérieures de Vue Router, nous pouvions spécifier le mode de routage avec l'attribut mode. Le mode

hash utilise le hachage d'URL pour simuler l'URL complète afin que la page ne se recharge pas lorsque l'URL change. Le mode history utilise l'API d'historique HTML5 pour implémenter la navigation URL sans recharger la page.

// src/main.js

import { createApp } from "vue";
import router from "./router";

const app = createApp({});
app.use(router);
app.mount("#app");

Dans Vue Router 4, ces modèles ont été résumés dans des modules, qui peuvent être importés et attribués à de nouvelles history options. Cette flexibilité supplémentaire nous permet de personnaliser le routeur selon nos besoins.

// Vue Router 3
const router = new VueRouter({
  mode: "history",
  routes: [...]
});

Routage dynamique

Vue Router 4 fournit la addRoute méthode pour implémenter le routage dynamique.

Cette méthode est rarement utilisée, mais elle présente des cas d'utilisation intéressants. Par exemple, disons que nous souhaitons créer une interface utilisateur pour une application de système de fichiers et que nous souhaitons ajouter des chemins de manière dynamique. Nous pouvons le faire comme suit :

// Vue Router 4
import { createRouter, createWebHistory } from "vue-router";

export default createRouter({
  history: createWebHistory(),
  routes: [],
});

Nous pouvons également utiliser les méthodes associées suivantes :

• removeRoute
• hasRoute
• getRoutes

Les gardes de navigation peuvent renvoyer des valeurs qui ne le sont pas. next

Les gardes de navigation sont des hooks Vue Router qui permettent aux utilisateurs d'exécuter une logique personnalisée avant ou après un saut, tels que beforeEach, beforeRouterEnter etc.

Ils sont généralement utilisés pour vérifier si l'utilisateur a l'autorisation d'accéder à une page, de valider les paramètres de routage dynamique ou de détruire les auditeurs.

Dans la version 4, nous pouvons renvoyer des valeurs ou des promesses à partir de méthodes hook. Cela vous permet d'effectuer les opérations suivantes rapidement et facilement :

methods: {
  uploadComplete (id) {
    router.addRoute({
      path: `/uploads/${id}`,
      name: `upload-${id}`,
      component: FileInfo
    });
  }
}

Ce ne sont là que quelques-unes des nouvelles fonctionnalités ajoutées dans la version 4. Vous pouvez vous rendre sur le site officiel pour en savoir plus.

Adresse originale en anglais : https://vuejsdevelopers.com/topics/vue-router/

Auteur : Matt Maribojoc

Plus de programmation liée Pour connaissances, veuillez visiter : Vidéos de programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!