Une brève analyse de la différence entre le routage de hachage et le routage historique dans Vue

Lors de l'utilisation du rendu frontal tel que Vue ou React, il existe généralement deux méthodes de routage : le routage de hachage et le routage d'historique. Alors, quelle est la différence entre ces deux méthodes de routage ? Laissez-moi vous le présenter ci-dessous, j'espère que cela vous sera utile !

Routage de hachage et routage historique La différence entre les deux modes, trions-la sous les aspects suivants :

1 Apparence

hash : c'est-à-dire le # symbole. Par exemple, cette URL : http://www.abc.com/#/hello, la valeur de hash est #/hello. Sa caractéristique est que même si le hachage apparaît dans l'URL, il ne sera pas inclus dans la requête HTTP et n'a aucun impact sur le backend, donc changer le hachage ne rechargera pas la page. [Recommandations associées : "tutoriel vue.jshash:  即地址栏 URL 中的#符号。 比如这个 URL：http://www.abc.com/#/hello， hash 的值为 #/hello。它的特点在于：hash 虽然出现在 URL 中， 但不会被包括在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。【相关推荐：《vue.js教程》】

history: 地址栏中没有 #。比如这个 URL：http://www.abc.com/hello，更美观，是个正常的url，适合推广宣传。

二、功能

history:  在开发app的时候有分享页面，这个分享出去的页面就是用vue或是react做的，咱们把这个页面分享到第三方的app里，有的app里面url是不允许带有#号的，所以要将#号去除那么就要使用history模式，但是使用history模式还有一个问题就是，在访问二级页面的时候，做刷新操作，会出现404错误，那么就需要和后端人配合，让他配置一下apache或是nginx的url重定向，重定向到你的首页路由上就好了。

三、回车刷新

• hash: 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面;

• history： 利用了 HTML5 History Interface 中新增的 pushState() 和replaceState() 方法。

  这两个方法应用于浏览器的历史记录栈，在当前已有的 back()、forward()、go() 方法的基础之上，这两个方法提供了对历史记录进行修改的功能。当使用这两个方法执行修改时，只能改变当前地址栏的 URL，但浏览器不会向后端发送请求，也不会触发popstate事件的执行，一般会出现404，这时候就需要和后端人配合，设置重定向。

四、使用场景

一般情况下，hash 和 history 都可以，如果你是个颜值控，对 # 符号夹杂在 URL 里有些不爽。

如果不想要很丑的 hash，我们可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成URL 跳转而无须重新加载页面。调用 history.pushState() 相比于直接修改 hash，存在以下优势：

1. pushState() 设置的新 URL 可以是与当前 URL 同源的任意 URL；而 hash 只可修改 # 后面的部分，因此只能设置与当前 URL 同文档的 URL；

2. pushState() 设置的新 URL 可以与当前 URL 一模一样，这样也会把记录添加到栈中；而 hash 设置的新值必须与原来不一样才会触发动作将记录添加到栈中；

3. ushState() 通过 stateObject 参数可以添加任意类型的数据到记录中；而 hash 只可添加短字符串pushState()"]

historique : dans l'adresse bar Il n'y a pas de #. Par exemple, cette URL : http://www.abc.com/hello est plus belle et une URL normale, adaptée à la promotion.

2. Fonction

historique : Lors du développement de l'application, il y a une page de partage cette page partagée est réalisée avec vue ou réagir. cette page vers une application tierce. Dans certaines applications, l'URL n'est pas autorisée à contenir le numéro #, donc si vous souhaitez supprimer le numéro #, vous devez utilisez le mode Historique, mais un autre problème avec l'utilisation du mode historique est que lors de l'accès à la page secondaire, une erreur 404 apparaîtra lors de l'opération d'actualisation. Vous devez ensuite coopérer avec la personne back-end et la laisser configurer la redirection d'URL d'Apache ou. nginx. Diriger, redirigez simplement vers l’itinéraire de votre page d’accueil.

3. Appuyez sur Entrée pour actualiser

• hash : bien qu'il apparaisse dans l'URL, il ne sera pas inclus dans le La requête HTTP n'a aucun impact sur le backend, donc changer le hachage ne rechargera pas la page

• history : profiter du nouveau pushState()  ; code> dans les méthodes HTML5 History Interface > et <code>replaceState(). Ces deux méthodes sont appliquées à la pile d'historique du navigateur, dans les back(), forward(), go() actuellement existants. code>, ces deux méthodes assurent la fonction de modification des enregistrements historiques. Lorsque vous utilisez ces deux méthodes pour effectuer des modifications, seule l'URL de la barre d'adresse actuelle peut être modifiée, mais le navigateur n'enverra pas de requête au backend et ne déclenchera pas non plus l'exécution de l'événement popstate. Généralement, 404. apparaîtra. À ce moment, vous devez coopérer avec les personnes back-end pour configurer la redirection. 🎜🎜

4. Scénarios d'utilisation 🎜🎜En général, le hachage et l'historique sont acceptables si vous êtes un amoureux de la beauté, # Le <. le symbole> mélangé dans l’URL est un peu désagréable. 🎜🎜Si nous ne voulons pas d'un hachage laid, nous pouvons utiliser le mode historique de routage, qui utilise pleinement l'API history.pushState pour effectuer des sauts d'URL sans recharger la page. Par rapport à la modification directe du hachage, l'appel de history.pushState() présente les avantages suivants : 🎜<ol> <li>🎜<code>pushState() Le nouvel ensemble d'URL peut être n'importe quelle URL ayant la même origine que l'URL actuelle; Le hachage ne peut modifier que la partie après #, vous ne pouvez donc définir que l'URL du même document que l'URL actuelle 🎜🎜

🎜pushState() Le nouvel ensemble d'URL ; peut être exactement la même que l'URL actuelle, donc L'enregistrement sera ajouté à la pile ; la nouvelle valeur définie par le hachage doit être différente de celle d'origine pour déclencher l'action d'ajout de l'enregistrement à la pile 🎜🎜

🎜ushState() peut être transmis via le paramètre stateObject. Ajoutez n'importe quel type de données à l'enregistrement ; tandis que le hachage ne peut ajouter que des chaînes courtes pushState() et peut en outre définir le attribut title pour une utilisation ultérieure. 🎜🎜🎜🎜 5. Résumé🎜🎜Le routage traditionnel est que lorsqu'un utilisateur accède à une URL, le serveur correspondant recevra la demande, puis analysera le chemin dans l'URL, exécutant ainsi la logique de traitement correspondante, complétant ainsi une distribution de route. 🎜🎜Le routage front-end n'implique pas le serveur. Il est implémenté par le front-end à l'aide de l'API de hachage ou d'historique HTML5. Il est généralement utilisé pour l'affichage et la commutation de différents contenus. 🎜🎜Pour plus de connaissances sur la programmation, veuillez visiter : 🎜Vidéos de programmation🎜 ! ! 🎜

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!