A quoi sert vue.router ?

vue.router est le plug-in de routage officiel qui facilite 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 ; dans les applications monopage vue-router, la commutation entre les chemins peut être utilisée pour réaliser des changements de page et des sauts.

[Recommandations d'articles connexes : vue.js]

La fonction de vue.router est :

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 la commutation entre les chemins, c'est-à-dire la commutation des composants.

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 propose deux façons d'implémenter le 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 en modifiant la valeur du point d'ancrage

2. Mode historique :

Puisque le mode hachage aura son propre # dans l'URL, si nous ne voulons pas d'un hachage laid, nous pouvons utiliser le mode historique de routage. Il suffit d'ajouter ". mode: 'history'" lors de la configuration des règles de routage. Ce mode peut être pleinement utilisé. API history.pushState pour terminer le saut d'URL sans recharger la page.

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, ce qui facilite la création d'applications d'une seule page. Les fonctionnalités incluses sont : vue-router

• Tables de routage/affichage imbriquées

• Configuration de routage modulaire basée sur des composants

• Paramètres de routage, requêtes, caractères génériques

• Afficher l'effet de transition basé sur le système de transition Vue.js

• Contrôle de navigation à grain fin

• Liens avec classe CSS activée automatiquement

• Mode historique HTML5 ou mode hachage, automatiquement rétrogradé dans IE9

• Comportement personnalisé de la barre de défilement

L'application monopage de Vue est basée sur le routage et les composants. Le routage est utilisé pour définir le chemin d'accès et transférer la carte du chemin avec 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 la commutation entre les chemins, c'est-à-dire la commutation des composants. L'essence du module de routage est d'établir la relation de mappage entre les URL et les pages.

Recommandations d'apprentissage associées :

Tutoriel d'apprentissage javascript

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!