Analyse sur la différence entre les modes de hachage et d'historique dans vue-router

Cet article partage avec vous une analyse des différences entre les modes hachage et historique dans vue-router. Le contenu est très bon. Les amis dans le besoin peuvent s'y référer. J'espère que cela pourra aider tout le monde.

Comme nous le savons tous, vue-router a deux modes, le mode hachage et le mode historique. Parlons de la différence entre les deux.

mode hachage

Le principe du mode hachage est l'événement onhashchange, qui peut être surveillé sur l'objet fenêtre :

window.onhashchange = function(event){
  console.log(event.oldURL, event.newURL);
  let hash = location.hash.slice(1);
  document.body.style.color = hash;
}

Le code ci-dessus permet de changer la couleur de la police de la page en changeant le hachage Bien qu'il soit inutile, il illustre dans une certaine mesure le principe.

Le point le plus important est que, comme le hachage des modifications d'URL sera enregistré par le navigateur, vous constaterez que l'avant et l'arrière du navigateur peuvent être utilisés, et lorsque vous cliquez en arrière, la couleur de la police de la page sera changer aussi. De cette façon, même si le navigateur n'a pas demandé au serveur, l'état de la page a été associé un par un à l'URL. Plus tard, les gens lui ont donné un nom dominateur appelé routage frontal, et il est devenu la configuration standard des applications monopage. .

NetEase Cloud Music et Baidu Netdisk utilisent le routage de hachage, qui ressemble à ceci :
http://music.163.com/#/friend

https://pan.baidu.com/disk/home#list/vmode=list

routage historique

Avec l'arrivée de l'API historique, le routage front-end a commencé à évoluer Pour le hashchange précédent, vous ne pouvez changer le fragment d'url qu'après #, tandis que l'API d'historique donne au front-end une liberté totale

L'API d'historique peut être divisée en deux Pour la plupart des changements et modifications, veuillez vous référer à MDN

L'état historique de commutation

comprend trois méthodes : retour, avant et aller, qui correspondent à l'avant du navigateur, en arrière et sauter En termes de fonctionnement, certains étudiants ont dit que le navigateur (Google) n'a que des fonctions avant et arrière, et qu'il n'y a pas de saut. Eh bien, si vous appuyez et maintenez la souris sur les boutons avant et arrière, l'historique de tous. la fenêtre actuelle apparaîtra, vous pourrez donc sauter (il vaut peut-être mieux l'appeler sauter) :

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

Modifier l'état historique.

Inclut pushState et replaceState. Ces deux méthodes La méthode reçoit trois paramètres : stateObj, title, url

history.pushState({color:'red'}, 'red', 'red'})
window.onpopstate = function(event){
  console.log(event.state)
  if(event.state && event.state.color === 'red'){
    document.body.style.color = 'red';
  }
}
history.back();
history.forward();

Save. l'état de la page dans l'objet d'état via pushstate. Lorsque l'URL de la page change à nouveau. Lorsque vous revenez à cette URL, vous pouvez obtenir cet objet d'état via event.state, afin de pouvoir restaurer l'état de la page ici. est la couleur de la police de la page. En fait, la position de la barre de défilement, la progression de la lecture et le changement du composant sont tous des états de page qui peuvent être stockés.

De quoi as-tu peur en mode historique

Grâce à l'API d'historique, nous avons perdu le vilain #, mais il a aussi un problème :

Je n'ai pas peur d'avancer, je n'ai pas peur de revenir en arrière, j'ai peur du rafraîchissement, f5, (si le backend n'est pas préparé), car le rafraîchissement est une requête réelle adressée au serveur, pas virtuelle.

En mode hachage, le routage front-end modifie les informations dans #, mais le navigateur ne joue pas avec lors de la requête, donc il n'y a pas de problème. Mais dans l'historique, vous pouvez librement modifier le chemin. Lors de l'actualisation, s'il n'y a pas de réponse ou de ressource correspondante sur le serveur, un 404 sera affiché toutes les minutes.

Donc, si vous souhaitez créer un blog d'une seule page sur github.io, vous devez choisir le mode hachage.

Recommandations associées :

Comment actualiser les jetons dans vue

SFC et analyse spécifique de vue-loader

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!