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

VueQuelle est la différence entre le hachage de routage frontal et l'historique ? Dans cet article, nous découvrirons la différence entre le hachage de routage frontal et l'historique. J'espère que cela sera utile à tout le monde !

Avant de comprendre ces deux routes, qu'il s'agisse de vue ou de react, vous choisirez inévitablement entre les routes lors de la création d'un projet In hash. et history seront inévitablement mêlés, ou ils se débrouilleront simplement et utiliseront la route hash par défaut avec # Après avoir lu ceci. article Partagez pour vous assurer que vous n'aurez pas de difficulté à choisir l'itinéraire à choisir à l'avenir, et que vous pourrez choisir sur demande. Si vous avez des questions, n'hésitez pas à les signaler dans la zone de commentaires et communiquons ensemble. vue还是 react 在项目创建时难免会进行路由之间选择,在 hash 和 history 难免会纠结一番,或者是直接稀里糊涂用了默认带 # 的 hash 路由，看完这篇分享,保准让你之后不会在为选择哪中路由犯难,实现按需选择。有疑问欢迎在评论区指出，大家一起沟通。

简单介绍 Vue Router

• Vue Router 是 Vue.js 官方的路由插件，它和 Vue.js 是深度集成的，适合用于构建单页面应用。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在 vue-router 单页面应用中，则是路径之间的切换，也就是组件的切换。路由模块的本质 就是建立起url和页面之间的映射关系。（学习视频分享：vue视频教程）
• 至于我们为什么不能用a标签，这是因为用Vue做的都是单页应用，就相当于只有一个主的 index.html 页面，所以你写的 标签是不起作用的，你必须使用 vue-router 来进行管理。

Vue Router 实现原理

• 在了解路由模式前，我们要先清楚，vue-roter 的实现原理是怎样的，什么是单页面应用，特点是什么，这样更容易加深对路由的理解。

• SPA 单页面及应用方式:单一页面应用程序，只有一个完整的页面；它在第一次加载页面时,就将唯一完整的 html 页面和所有其余页面组件一起下载下来，这样它在切换页面时，不会加载整个页面，而是只更新某个指定的容器中内容。

• 单页面应用(SPA)的核心之一是: 更新视图而不重新请求页面。

• 路由器对象底层实现的三大步骤即(1)监视地址栏变化；(2)查找当前路径对应的页面组件；(3)将找到的页面组件替换到 router-vieW 的位置。

• vue-router 在实现单页面前端路由时，提供了两种方式：Hash 模式和 History 模式；vue2 是根据 mode 参数来决定采用哪一种方式，vue3 则是 history 参数，下面我们将围绕这个属性进行进一步了解。

  

Hash

简述

• vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。  hash（#）是 URL 的锚点，代表的是网页中的一个位置，单单改变 # 后的部分，浏览器只会滚动到相应位置，不会重新加载网页，也就是说 # 是用来指导浏览器动作的，对服务器端完全无用，HTTP 请求中也不会不包括 # ，同时每一次改变 # 后的部分，都会在浏览器的访问历史中增加一个记录，使用 "后退" 按钮，就可以回到上一个位置，所以说 hash 模式通过锚点值的改变，根据不同的值，渲染指定 DOM 位置的不同数据。

• # 符号本身以及它后面的字符称之为 hash，可通过 window.location.hash

  Une brève introduction à Vue Router

  • Vue Router est Vue.js Le plug-in de routage officiel, il est dans profondeur avec Vue.js Integrated, adapté à la création d'applications d'une seule page. L'application monopage de vue est basée sur le routage et les composants. Le routage est utilisé pour définir les chemins d'accès et mapper les chemins vers les composants. Les applications de pages traditionnelles utilisent certains hyperliens pour effectuer des changements de page et des sauts. Dans l'application monopage vue-router, il s'agit de la commutation entre les chemins, c'est-à-dire la commutation des composants. L'essence du module de routage est d'établir la relation de mappage entre les URL et les pages. (Partage de vidéos d'apprentissage : vue vidéo tutoriel🎜)
  • Quant à la raison pour laquelle nous ne pouvons pas utiliser la balise a, c'est parce que tout ce que nous utilisons Vue est une application d'une seule page, ce qui équivaut à n'avoir qu'une seule page principale index.html, donc les balises 🎜 ne fonctionnent pas, vous devez utiliser vue-router pour les gérer.

  Principe de mise en œuvre de Vue Router

  • 🎜Avant de comprendre le mode de routage, nous devons Tout d'abord, soyons clairs sur le principe de mise en œuvre de vue-roter, qu'est-ce qu'une application monopage et quelles sont ses caractéristiques. Cela vous permettra d'approfondir plus facilement votre compréhension du routage. 🎜
  • 🎜SPA Page unique et méthode de candidature : Une candidature monopage n'a qu'une seule page complète lorsqu'elle charge la page pour la première fois, elle chargera le seul html est téléchargée avec tous les autres composants de la page, de sorte que lorsqu'elle change de page, elle ne chargera pas la page entière, mais mettra uniquement à jour le contenu dans un conteneur spécifié. 🎜
  • 🎜L'un des cœurs de l'application à page unique (SPA) est : mettre à jour la vue sans redemander la page. 🎜
  • 🎜Les trois étapes principales de l'implémentation sous-jacente de l'objet routeur sont (1) la surveillance des modifications dans la barre d'adresse ; le composant de page correspondant au chemin actuel ;(3)Remplacer le composant de page trouvé à l'emplacement de router-view. 🎜
  • 🎜vue-router propose deux façons d'implémenter le routage frontal sur une seule page : le mode Hash et l'Historique Mode ; vue2 détermine la méthode à utiliser en fonction du paramètre mode, tandis que vue3 utilise le paramètre history Ci-dessous, nous en apprendrons plus sur cet attribut. 🎜🎜🎜 li>

  Hash

  Brève description

  🎜🎜
  • 🎜vue-router Mode de hachage par défaut - Utilisez le hachage d'URL pour simuler une URL complète, ainsi lorsque l'URL change, la page ne sera pas rechargée. hash (#) est le point d'ancrage de URL, qui représente une position dans la page Web. Changez simplement la partie après # et le navigateur. fera seulement défiler jusqu'à la position correspondante et ne rechargera pas la page Web. En d'autres termes, # est utilisé pour guider les actions du navigateur et est totalement inutile pour le serveur. code> ne sera pas utilisé dans la requête. n'inclura pas #. En même temps, chaque fois que la partie après # est modifiée, un enregistrement sera ajouté au. l'historique d'accès du navigateur. Utilisez le bouton "Retour" pour revenir à la position précédente, de sorte que le mode hash restitue différentes données à la position DOM spécifiée en modifiant la valeur du point d'ancrage en fonction. des valeurs différentes. 🎜
  • 🎜# Le symbole lui-même et les caractères qui le suivent sont appelés hash, qui peut être transmis via window.location.hash Lecture de propriété. 🎜

  Caractéristiques

  • hash Bien qu'il apparaisse dans l'URL, il ne sera pas inclus dans la requête HTTP. Il est utilisé pour guider les actions du navigateur et est totalement inutile côté serveur. Par conséquent, changer le hash ne rechargera pas la pagehash 虽然出现在URL中，但不会被包括在 HTTP 请求中。它是用来指导浏览器动作的，对服务器端完全无用，因此，改变 hash 不会重新加载页面
  • 可以为 hash 的改变添加监听事件：

  •    window.addEventListener("hashchange", fncEvent, false)

  • 每一次改变 hash（window.location.hash），都会在浏览器的访问历史中增加一个记录
  • url 带一个 # 号。

  设置

  • vue3 设置 hash 模式路由

    

  history

  简述

  

  • history 是路由的另一种模式，由于 hash 模式会在 url 中带#，如果不想要带 #的话，我们可以使用路由的 history 模式，只需要在响应的 router 配置规则时,加上即可，vue 的路由默认是 hash 模式。
  • 利用了HTML5 History Interface中新增的 pushState() 和 replaceState() 方法。
  • 这两个方法应用于浏览器的历史记录栈，在当前已有的 back、forward、go 的基础之上，它们提供了对历史记录进行修改的功能。只是当它们执行修改时，虽然改变了当前的 URL，但浏览器不会立即向后端发送请求。

  设置

  

  特点

  • 路由跳转不需要重新加载页面。
  • 不带 # 在大部分人看来要比 hash 路由好看许多。
  • 兼容性没有 hash 好，会在下面展开说明

  生产环境问题及解决

  • 当我们把 history 项目部署到服务器中后,此时我们在浏览器输入一个网址(比如是 www.test.com ), 此时会经过 dns 解析，拿到 ip 地址后根据 ip 地址向该服务器发起请求,服务器接受到请求后,然后返回相应的结果(html,css,js)。如果我们在前端设置了重定向，此时页面会进行跳转到  www.test.com/home ,在前端会进行匹配对应的组件然后将其渲染到页面上。此时如果我们刷新页面的话，浏览器会发送新的请求 www.test.com/home, 如果后端服务器没有 /home 对应的接口，那么就会返回404。

    

  • 生产环境 刷新 404 的解决办法可以在 nginx 做代理转发，在 nginx 中配置按顺序检查参数中的资源是否存在，如果都没有找到，让 nginx 内部重定向到项目首页。

    

  开发环境- historyApiFallback

  • 有些小伙伴会有疑问,为什么开发环境没有遇到这个问题呢，不是和生产同样的刷新操作嘛。

    

  • 这里我也是疑问了一下，经查阅相关资料后发现在 vue-cli 中 webpack 帮我们做了处理

    

  • 如果我们把该配置改位 false,浏览器会把我们这个当做是一次 get 请求，如果后端没有对应的接口,就会出现下面这个报错提示。

    

    

  总结

  • 至此我们使用知道了 vue-roter 的两种路由模式，及差异化，简单来讲就是，hash 路由兼容梗好，但是带#显得丑些， histroy

    Vous pouvez ajouter des événements d'écoute pour les modifications du hash. : 🎜🎜rrreee🎜🎜Chaque fois que le hachage (window.location.hash) est modifié, un enregistrement sera ajouté à l'historique d'accès du navigateur🎜🎜url avec un # nombre. 🎜🎜

    🎜Paramètres🎜🎜🎜🎜vue3 paramètres hachage modèle de routage

    🎜🎜🎜

    🎜histoire🎜 h2>

    🎜Brève description🎜🎜

    🎜🎜🎜history est un autre mode de routage. Puisque le mode de hachage contiendra # dans l'url, si vous ne voulez pas it #, on peut utiliser le mode de routage history. Il suffit d'ajouter le routage de vue lors de la configuration des règles dans la réponse router. La valeur par défaut est le mode hash. 🎜🎜Utilisation des nouvelles méthodes pushState() et replaceState() dans HTML5 History Interface. 🎜🎜Ces deux méthodes sont appliquées à la pile d'historique du navigateur. Sur la base du back, forward, go existant, elles fournissent la fonction de modification de l'enregistrement de l'historique. C'est juste que lorsqu'ils effectuent des modifications, même si l'URL actuelle a été modifiée, le navigateur n'envoie pas immédiatement de demande au backend. 🎜🎜

    🎜Paramètres🎜🎜

    🎜

    🎜Caractéristiques🎜🎜🎜🎜Le saut d'itinéraire ne nécessite pas de recharger la page. 🎜🎜Sans #, la plupart des gens pensent que cela semble bien meilleur que le routage de hachage. 🎜🎜La compatibilité n'est pas aussi bonne que le hachage, ce qui sera expliqué ci-dessous🎜🎜

    🎜Problèmes et solutions de l'environnement de production🎜🎜🎜🎜Lorsque nous déployons le projet d'historique sur le serveur, à ce moment-là, nous entrons une URL dans le navigateur (par exemple, www.test.com). À ce moment-là, elle sera analysée par DNS. Après avoir obtenu l'adresse IP, nous lancerons une requête. au serveur en fonction de l'adresse IP. Une fois que le serveur a reçu la requête, puis renvoie les résultats correspondants (html, css, js). Si nous configurons une redirection sur le front-end, la page passera à www.test.com/home. Le front-end correspondra au composant correspondant et le restituera sur la page. Si nous actualisons la page à ce moment, le navigateur enverra une nouvelle requête www.test.com/home Si le serveur backend n'a pas d'interface correspondant à /home, alors 404 sera renvoyé. .

    🎜🎜 🎜La solution à l'actualisation de l'environnement de production 404 peut être effectuée par transfert de proxy dans nginx. Configurez nginx pour vérifier si les ressources dans les paramètres existent. Si aucune n'est trouvée, laissez nginx rediriger en interne vers le. page d'accueil du projet.

    🎜🎜 🎜

    🎜Environnement de développement - historyApiFallback🎜🎜🎜🎜

    Certains amis peuvent se demander pourquoi l'environnement de développement ne rencontre pas ce problème. N'est-ce pas la même opération de rafraîchissement qu'en production. ? 🎜

    🎜 🎜🎜

    J'avais aussi des questions ici. Après avoir vérifié les informations pertinentes, j'ai découvert que le webpack dans vue-cli nous a aidé à gérer cela🎜

    🎜🎜🎜

    Si nous Modifiez cette configuration sur false et le navigateur traitera notre requête comme une requête get. Si le backend n'a pas d'interface correspondante, le message d'erreur suivant apparaîtra. 🎜

    🎜

    🎜🎜 🎜

    🎜Résumé🎜

    🎜🎜

    Jusqu'à présent, nous connaissons les deux modes de routage et la différenciation de vue-roter, pour le dire simplement, hash est bon pour la compatibilité de routage, mais a l'air moche avec #. histoy est le même que le chemin d'URL normal, mais doit être configuré séparément sur le serveur. Chacun peut l'utiliser selon ses besoins selon ses propres préférences. Les étudiants qui ont des questions sont invités à communiquer dans la zone de commentaires. 🎜

  (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!