Deux modes de routage en vue et leurs principes de mise en œuvre

Vue.js est un framework front-end populaire qui permet le développement d'applications monopage (SPA) grâce à son excellent module de gestion de routage. Le module de gestion du routage Vue (Vue Router) dispose de deux modes : le mode Historique et le mode Hash. Dans cet article, nous expliquerons en détail comment ces deux modes sont implémentés et comment les utiliser dans Vue.

1. Le concept de mode de routage

Dans le développement d'applications multipages traditionnelles, chaque page a sa propre adresse URL et les utilisateurs demanderont différentes pages lorsqu'ils accéderont à différentes adresses URL. Dans une application monopage, toutes les pages sont affichées dans la même page HTML. Le saut de l'utilisateur ne provoquera pas le rechargement de la page, mais la page sera basculée via JavaScript. Dans le processus de changement de page, le module de gestion du routage Vue joue un rôle important.

Le mode de routage fait référence à la méthode utilisée par l'adresse URL lors de la transmission. Selon ses différences, nous pouvons diviser le mode de routage en deux types : le mode de routage basé sur le hachage et le mode de routage basé sur l'historique.

2. Mode Hash

Le mode Hash est le mode de routage par défaut de Vue Router, et son principe de mise en œuvre est très simple. Le hachage fait référence au signe # dans l'URL, qui est le point d'ancrage que nous voyons souvent.

En mode hachage, le signe # dans l'URL est suivi du chemin de la page, par exemple http://www.example.com/#/home, où /#/home est le chemin de la page. Lorsque l'utilisateur accède à la page, Vue Router affichera le chemin de la nouvelle page dans l'URL en modifiant la partie de hachage, réalisant ainsi le changement de page. Il ne déclenchera pas le rechargement de la page, mais rendra une nouvelle page.

L'avantage d'utiliser le mode hachage est qu'il peut éviter la duplication d'URL, car la partie hachage ne sera pas envoyée au serveur, mais sera activée sur le front-end. Cependant, cela entraîne également certains effets secondaires, tels qu’affecter le référencement dans les moteurs de recherche et provoquer des irrégularités dans les URL.

3. Mode Historique

Le mode historique utilise l'API en HTML5, qui utilise l'API window.history.pushState, l'API window.history.replaceState et l'événement popstate. Dans ce mode, Vue Router ajoutera l'URL de la page actuelle à la pile d'historique et implémentera le changement d'itinéraire en exploitant la pile. Lorsque l'utilisateur clique sur le bouton Précédent du navigateur, Vue Router écoute l'événement popstate via le mécanisme d'écoute d'événement et revient à l'adresse URL précédente. Voici un exemple de code :

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

Il convient de noter ici que si vous choisissez d'utiliser le mode historique, vous devez définir la configuration du serveur de manière appropriée. Car dans ce mode, lorsque l'URL accédée n'est pas le chemin d'accès à une ressource statique sur le serveur, une erreur 404 sera renvoyée.

4. Changer le mode de routage

Lorsque nous utilisons Vue Router pour développer des applications monopage, nous pouvons changer le mode de routage via les deux méthodes suivantes :

1. Définissez l'attribut mode dans le module de routage. comme suit :

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

2. Implémenté en définissant la propriété historyApiFallback dans le fichier vue.config.js lors de la construction du projet. Voici un exemple de code :

module.exports = {
  devServer: {
    historyApiFallback: true
  }
}

Il convient de noter ici que lors de la définition du mode de routage, il doit être testé et vérifié dans l'environnement du serveur pour garantir que la fonction de routage peut fonctionner normalement.

5. Résumé

Vue Router est une partie importante de Vue.js, qui peut réaliser la gestion du routage frontal des applications d'une seule page. Selon la méthode utilisée dans le processus de transmission de l'adresse URL, elle est divisée en deux types : le mode hachage et le mode historique. Chacun a ses propres avantages et inconvénients, et les développeurs doivent choisir en fonction des besoins réels. Lorsque vous utilisez Vue Router pour le développement d'applications monopage, vous devez définir le mode de routage de manière appropriée, puis le tester et le vérifier dans l'environnement du serveur pour vous assurer que la fonction de routage peut s'exécuter normalement.

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!