Quels sont les modes de routage vue ?

Les modes de routage Vue incluent : 1. Le mode de hachage, qui utilise la valeur de hachage de l'URL comme itinéraire et prend en charge tous les navigateurs ; le caractère "#" apparaîtra dans le chemin de l'URL. 2. Mode historique, qui s'appuie sur l'API HTML5 (non supportée par les anciens navigateurs) et la configuration du serveur HTTP. Sans configuration en arrière-plan, 404 apparaîtra lors de l'actualisation de la page. 3. Mode abstrait, applicable à tous les environnements JavaScript, s'il n'y en a pas. API du navigateur, le routeur sera automatiquement forcé dans ce mode.

L'environnement d'exploitation de ce tutoriel : système windows7, version vue3, ordinateur DELL G3.

Analyse du mode de routage

Ici, nous parlerons du mode de routage de vue-router La première chose à comprendre est que le routage est composé de plusieurs URL. Vous pouvez utiliser différentes URL pour naviguer vers différents emplacements en conséquence. Si vous avez fait du développement de serveur ou si vous avez une certaine compréhension du protocole http, vous saurez que l'accès à la page dans le navigateur est sans état, nous vous demanderons donc à nouveau lors du changement de page. Si vous développez réellement en utilisant vue et vue-router, vous comprendrez que lors du changement de page, il n'y a pas de nouvelle demande ou de réactualisation de la page. Il semble que la page soit avec état. Ceci est en fait réalisé à l'aide de l'API d'historique du navigateur, qui permet à la page de sauter sans actualisation, et l'état de la page est conservé dans le navigateur.

1. Mode hachage

Utilisez le hachage de l'URL pour simuler une URL complète, ainsi lorsque l'URL change, la page ne sera pas rechargée et il y aura un signe "#" dans le chemin réseau affiché, ce qui est un peu moche. C'est le mode le plus sécurisé car il est compatible avec tous les navigateurs et serveurs.

1-Caractéristiques : Il y a '#' sur l'adresse URL du mode de hachage#'

 <a href=&#39;#/aaa&#39;>1(#/aaa)</a>

其中#/aaa就是我们的hash值,并且hash值并不会传给服务器

2-实现的原理：

原生的hashChange事件，主要是通过事件监听hash值得变化 window.onHashChange=function(){}

3-刷新页面：

不会不发生请求，页面不会有任何问题，不需要后端配合

而且hash模式的兼容性比较好.不过他因为带有'#'所以他的美观行没有history 模式好。

二、history模式

美化后的hash模式，会去掉路径中的 “#

history.go(-2);//后退两次
history.go(2);//前进两次
history.back(); //后退
hsitory.forward(); //前进

où #/aaa est notre valeur de hachage, et la valeur de hachage ne sera pas transmise au serveur

2-Principe de mise en œuvre :

L'événement natif hashChange surveille principalement les changements de valeur de hachage via des événements window.onHashChange=function(){}3-Actualiser la page :

Non, il n'y aura aucune demande, il n'y aura aucun problème avec la page, aucune coopération back-end n'est requise

, et le mode de hachage a une meilleure compatibilité. Cependant, comme il contient '#', ses belles lignes ne sont pas aussi bonnes. comme mode historique.

2. Mode Historique

Le mode de hachage embelli supprimera "#" dans le chemin. Il s'appuie sur l'historique et l'API pushState de Html5, vous n'avez donc pas à vous soucier d'IE9 et des versions ultérieures. Il comprend également trois méthodes : back, forward et go, qui correspondent aux opérations avant, arrière et saut du navigateur. Il s'agit de l'opération effectuée par les boutons avant et arrière dans le coin supérieur gauche du navigateur. [Partage de vidéos d'apprentissage :

tutoriel vidéo vue

,

vidéo web front-end

]

const router = new VueRouter({routes, mode:'hash|history|abstract',})

Mais l'histoire a aussi des défauts Vous n'avez pas peur des sauts en avant et en arrière, mais vous avez peur du rafraîchissement (si le backend ne l'est pas. préparé), car le rafraîchissement est réel. Allez demander au serveur localement.

Pour résumer

🎜1 : Le mode hachage (URL du mode par défaut de vue-router suivi de #) utilise la valeur de hachage de l'URL comme itinéraire et prend en charge tous les navigateurs. Inconvénients : Vous ne pouvez modifier que le # suivant ; mettre en œuvre le routage Jump. 🎜 2 : Mode historique (passage en mode historique via le mode : 'history') HTML5 (BOM) Lacunes de l'API d'historique et de la configuration du serveur : peur du rafraîchissement Si le backend ne gère pas cette situation, le rafraîchissement du front-end demandera effectivement le rafraîchissement. serveur. Cela prend beaucoup de temps et est très lent. 🎜🎜🎜🎜3. Mode abstrait 🎜🎜abstract est le troisième mode du routage vue. Il est utilisé comme solution de secours dans les environnements qui ne prennent pas en charge les API du navigateur. Les modes de hachage et d'historique affecteront le navigateur. La fonction qu'il souhaite généralement réaliser est d'intégrer d'autres pages de routage dans la page de routage existante, tout en gardant le chemin de routage de la page actuelle toujours affiché dans le navigateur. Il s'agit d'un mode abstrait, séparé du mode de routage du navigateur. 🎜🎜S'applique à tous les environnements JavaScript, tels que côté serveur utilisant Node.js. Sans l'API du navigateur, le routeur sera automatiquement forcé dans ce mode. 🎜🎜Alors changez ici 🎜rrreee🎜. 🎜🎜 (Partage de vidéos d'apprentissage : 🎜développement web front-end🎜, 🎜Vidéo de programmation de base🎜)🎜

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!