1. Brève introduction
HashHistory et BrowserHistory sont des classes définies dans la bibliothèque d'historique. Vous pouvez créer des objets hashHistory et browserHistory respectivement via les méthodes createHashHistory et createBrowserHistory dans la bibliothèque d'historique, et les deux sont des objets singleton. Ces deux éléments sont dérivés de l'encapsulation de l'objet window.history et de l'objet window.location, afin que nous puissions mieux exploiter l'historique du navigateur. Par exemple, l'utilisation de la bibliothèque d'historique peut empêcher les sauts, ainsi que définir des invites de saut .
Il convient de mentionner qu'il existe également une méthode createMemoryHistory dans la bibliothèque d'historique qui peut être utilisée pour créer un objet memoryHistory. memoryHistory ne dépend pas de l'environnement du navigateur et tous les enregistrements historiques sont stockés en mémoire.
Deuxièmement, la différence entre les deux
-
Lors de l'utilisation de l'objet hashHistory, l'adresse de routage est placée dans la valeur de hachage de l'URL, et la valeur de hachage commence par "#", tandis que lors de l'utilisation de l'objet browserHistory, l'adresse de routage se trouve dans le chemin de l'URL.
-
browserHistory a des problèmes de compatibilité de navigateur. browserHistory utilise les méthodes pushState et replaceState dans l'objet window.history. Ces deux méthodes sont de nouvelles API d'historique en HTML5, et tous les navigateurs ne les prennent pas en charge.
-
browserHistory nécessite la prise en charge du serveur. Lorsqu'une sous-page est actualisée ou que quelqu'un revisite en copiant l'adresse de routage de la sous-page, une demande sera envoyée au serveur à ce moment, et l'adresse de demande transmise au serveur est l'adresse de routage correspondante de la sous-page, et le serveur devrait également être en mesure de faire l'analyse correspondante et de renvoyer la page d'accueil. hashHistory place l'adresse de routage dans la valeur de hachage, et la valeur de hachage dans l'URL sera ignorée lors de la demande au serveur, de sorte que le serveur n'a besoin de traiter que l'adresse de demande de la page d'accueil, et aucun autre traitement n'est requis.
-
hashHistory ne peut pas être défini pour forcer le mode de mise à jour. L'adresse de routage de hashHistory est placée dans la valeur de hachage, et la modification de la valeur de hachage via window.position.hash ne déclenchera pas le navigateur pour actualiser la page, donc hashHistory ne peut pas définir le mode de mise à jour forcée, mais browserHistory le peut.
-
hashHistory peut définir le mode de hachage hashType. hashType a trois valeurs d'énumération, à savoir "slash", "noslash" et "hashbang", la valeur par défaut est "slash", oui. Lorsque la valeur est "slash", le symbole dièse "#" sera suivi de "/" ; lorsque la valeur est "noslash", il n'y aura pas de "/" après "#" ; lorsque la valeur est "hashbang", alors "#" sera suivi de "!" et "/", de sorte que lorsque le moteur de recherche explore l'URL, il explore le hachage dans l'URL, afin d'obtenir des informations plus complètes.
-
hashHistory ne peut lire la valeur d'état que depuis hashHistory.location.state, mais pas depuis window.history.state. La bibliothèque d'historique de la version 4 ne recommande pas d'utiliser state dans hashHistory, bien que l'état puisse être transmis via l'objet location , mais comme un état au niveau de la page, il n'a pas la capacité de conserver l'état, car l'objet window.location n'a pas de méthode pour enregistrer l'état. Lorsque le navigateur revient sur la page, puis la retransmet, la valeur de lecture hashHistory.location.state sera vide et browserHistory pourra lire à nouveau la valeur d'état.
Référence de : https://www.jianshu.com/p/7c5695a28b9e