Quelle est la différence entre l'historique et le hachage en vue

Différence : 1. La route de hachage a "#" sur l'URL dans la barre d'adresse, mais pas la route historique ; 2. Lors de l'exécution d'une opération d'actualisation en appuyant sur Entrée, la route de hachage sera chargée sur la page correspondant à la barre d'adresse, tandis que l'itinéraire de l'historique affichera généralement une erreur 404 ; 3. Hash prend en charge certains navigateurs de version inférieure, mais pas l'historique.

L'environnement d'exploitation de cet article : système Windows 10, Vue version 2.9.6, ordinateur DELL G3.

Quelle est la différence entre l'historique et le hachage dans vue ?

• 1. La route de hachage a # sur l'URL de la barre d'adresse et est lue avec window.location.hash. La route de l'historique ne sera pas meilleure

• 2. Lorsque nous appuyons sur Entrée pour actualiser, la route de hachage sera chargée sur la page correspondant à la barre d'adresse, alors que la route de l'historique signale généralement une erreur 404 (l'actualisation est une demande réseau). , et il n'y a pas de préparation back-end qui signalera une erreur).

• 3. Le routage de hachage prend en charge les versions inférieures des navigateurs, tandis que le routage d'historique est une nouvelle API en HTML5.

• 4.hash se caractérise par le fait que bien qu'il apparaisse dans l'URL, il n'est pas inclus dans la requête http, il n'a donc aucun impact sur le backend, donc changer le hachage ne rechargera pas la page, donc c'est aussi une seule page Indispensable pour l'application.

• 5.history utilise la pile d'historique du navigateur. Il y avait auparavant des méthodes back, forward et go. Plus tard, les méthodes pushState() et replaceState() ont été ajoutées dans HTML5, qui offrent la possibilité de modifier la fonction des enregistrements d'historique. mais lors de modifications, même si l'URL actuelle est modifiée, le navigateur n'enverra pas immédiatement de demande au backend.

• 6. Ce mode d'historique nécessite une prise en charge de la configuration en arrière-plan. Par exemple : lorsque nous allons sur la page d'accueil du projet, tout est normal et accessible, mais lorsque nous actualisons la page ou accédons directement au chemin, 404 sera renvoyé car en mode historique, window.history est uniquement. opéré dynamiquement via js. Pour changer le chemin dans la barre d'adresse du navigateur, aucune requête http n'est initiée, mais lorsque je saisis cette adresse directement dans le navigateur, je dois initier une requête http au serveur, mais cette cible n'existe pas sur le serveur. serveur, donc reviendra 404

Résumé

Bien sûr, l'histoire n'est pas bonne en tout. Bien que SPA soit facile à utiliser dans le navigateur, la différence entre les deux survient lorsque vous devez réellement lancer une requête HTTP vers le backend via l'URL. Surtout lorsque l'utilisateur saisit manuellement l'URL et appuie sur Entrée, ou actualise (redémarre) le navigateur.

1 : En mode hachage, seul le contenu avant le symbole dièse sera inclus dans la requête, comme http://www.abc.com Par conséquent, pour le backend, même si une couverture complète du routage n'est pas obtenue, Aucune erreur 404 ne sera renvoyée.

2 : En mode historique, l'URL du front-end doit être cohérente avec l'URL qui initie réellement la requête vers le back-end. Tel que http://www.abc.com/book/id. Si le backend ne dispose pas de traitement de routage pour /book/id, une erreur 404 sera renvoyée

Solution du problème :

Solution à une erreur 404 : de nombreuses méthodes introduites en ligne ne fonctionneront pas. Installez le module de réécriture d'URL, configurez les règles de réécriture et pointez-les vers index.html Ou placez directement le fichier web.config généré par la réécriture d'URL directement dans le répertoire racine du site Web.

【Recommandation associée : "Tutoriel vue.js"】

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!