Qu'est-ce que vue-router

Pour apprendre vue-router, vous devez d'abord savoir quel est le routage ici ? Pourquoi ne pouvons-nous pas écrire des liens directement en utilisant la balise comme auparavant ? Comment utiliser vue-router ? Quelles sont les opérations de routage courantes ? En attendant ces questions, ce sont les principales questions qui seront abordées dans cet article

Qu'est-ce que vue-router

Le routage ici est not Fait référence à ce que nous appelons habituellement les routeurs matériels. Le routage est ici le gestionnaire de chemin du SPA (Single Page Application). Pour le dire plus généralement, vue-router est le système de gestion des chemins de liens de WebApp.
vue-router est le plug-in de routage officiel de Vue.js. Il est profondément intégré à vue.js et convient à la création d'applications d'une seule page. L'application monopage de Vue est basée sur le routage et les composants. Le routage est utilisé pour définir les chemins d'accès et cartographier les chemins et les composants. Les applications de pages traditionnelles utilisent certains hyperliens pour effectuer des changements de page et des sauts. Dans l'application monopage vue-router, il s'agit de basculer entre les chemins, c'est-à-dire de changer de composants. L'essence du module de routage est d'établir la relation de mappage entre les URL et les pages.
Quant à la raison pour laquelle nous ne pouvons pas utiliser la balise a, c'est parce que nous utilisons Vue pour faire des applications d'une seule page, ce qui équivaut à n'avoir qu'une seule page index.html principale, donc vous écrivez Les balises ne fonctionnent pas, vous devez utiliser vue-router pour les gérer.

Principe de mise en œuvre de Vue-router

SPA (application monopage) : une application monopage avec une seule page complète elle ne se chargera pas lors du chargement de la page Au lieu de en mettant à jour la page entière, seul le contenu d'un conteneur spécifié est mis à jour. L'un des cœurs d'une application monopage (SPA) est : la mise à jour de la vue sans redemander la page ; vue-router fournit deux méthodes lors de la mise en œuvre du routage frontal d'une seule page : le mode hachage et le mode historique

1 , Mode de hachage :

mode de hachage par défaut de vue-router - utilise le hachage de l'URL pour simuler une URL complète, ainsi lorsque l'URL change, la page ne sera pas rechargée. Le hachage (#) est le point d'ancrage de l'URL, qui représente une position dans la page Web. Si vous modifiez uniquement la partie après #, le navigateur défilera uniquement jusqu'à la position correspondante et ne rechargera pas la page Web. , # est utilisé pour guider la navigation. C'est totalement inutile côté serveur, et la requête HTTP n'inclut pas # en même temps, chaque fois que la partie après # est modifiée, un enregistrement sera ajouté à l'historique d'accès du navigateur. . Utilisez le bouton "Retour" pour revenir à la position précédente ; afin que le mode Hash restitue différentes données à la position DOM spécifiée en fonction de différentes valeurs grâce au changement de la valeur du point d'ancrage

2. Historique. mode :

Puisque le mode de hachage sera L'URL est livrée avec # Si nous ne voulons pas d'un hachage laid, nous pouvons utiliser le mode historique de routage. Il suffit d'ajouter "mode : 'historique'". lors de la configuration des règles de routage. Ce mode utilise pleinement l'API history.pushState pour effectuer les sauts d'URL sans recharger la page.

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!