Eine kurze Analyse des Unterschieds zwischen Hash und Verlauf beim Vue-Front-End-Routing

VueWas ist der Unterschied zwischen Front-End-Routing-Hash und Verlauf? In diesem Artikel erfahren Sie mehr über den Unterschied zwischen Front-End-Routing-Hash und Verlauf. Ich hoffe, er ist für alle hilfreich!

Bevor Sie diese beiden Routen verstehen, ob es sich um vue oder react handelt, müssen Sie beim Erstellen eines Projekts zwangsläufig zwischen den Routen wählen und history werden unweigerlich miteinander verwechselt, oder sie werden sich einfach durchwühlen und die Standardroute hash mit # verwenden Teilen Sie den Artikel, um sicherzustellen, dass Sie in Zukunft keine Probleme mehr bei der Auswahl der Route haben und bei Bedarf auswählen können. Wenn Sie Fragen haben, weisen Sie diese bitte im Kommentarbereich darauf hin und lassen Sie uns gemeinsam kommunizieren. 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

  Eine kurze Einführung in Vue Router

  • Vue Router ist Vue.js Das offizielle Routing-Plug-in, es ist in Tiefe mit Vue.js Integriert, geeignet für die Erstellung von Single-Page-Anwendungen. Die Single-Page-Anwendung von vue basiert auf Routing und Komponenten. Routing wird verwendet, um Zugriffspfade festzulegen und Pfade zu Komponenten abzubilden. Herkömmliche Seitenanwendungen verwenden einige Hyperlinks, um Seitenwechsel und -sprünge zu implementieren. In der Single-Page-Anwendung vue-router wird zwischen Pfaden gewechselt, also zwischen Komponenten. Der Kern des Routing-Moduls besteht darin, die Zuordnungsbeziehung zwischen URLs und Seiten herzustellen. (Teilen von Lernvideos: vue-Video-Tutorial🎜)
  • Der Grund, warum wir das a-Tag nicht verwenden können, liegt daran, dass alles, was wir in Vue verwenden, eine einseitige Anwendung ist, was gleichbedeutend damit ist, dass wir nur eine Hauptseite index.html haben Sie schreiben 🎜 Tags funktionieren nicht, Sie müssen zur Verwaltung vue-router verwenden ihnen.

  Vue Router-Implementierungsprinzip

  • 🎜Bevor wir den Routing-Modus verstehen, müssen wir Lassen Sie uns zunächst das Implementierungsprinzip von vue-roter klären, was eine Single-Page-Anwendung ist und welche Merkmale sie aufweist. Dadurch wird es einfacher, Ihr Verständnis des Routings zu vertiefen. 🎜
  • 🎜SPA Einzelseiten- und Anwendungsmethode: Eine Einzelseitenanwendung hat nur eine vollständige Seite. Wenn sie die Seite zum ersten Mal lädt, wird die einzige vollständige Seite geladen code Die >html-Seite wird zusammen mit allen anderen Seitenkomponenten heruntergeladen, sodass beim Seitenwechsel nicht die gesamte Seite geladen wird, sondern nur der Inhalt in einem angegebenen Container aktualisiert wird. 🎜
  • 🎜Einer der Kerne der Einzelseitenanwendung (SPA) ist: Aktualisieren der Ansicht, ohne die Seite erneut anzufordern. 🎜
  • 🎜Die drei Hauptschritte der zugrunde liegenden Implementierung des Router-Objekts sind (1)Überwachen von Änderungen in der Adressleiste; (2)Finden Die Seitenkomponente, die dem aktuellen Pfad entspricht. (3) Ersetzen Sie die gefundene Seitenkomponente an der Position von router-view. 🎜
  • 🎜vue-router bietet zwei Möglichkeiten, Single-Page-Front-End-Routing zu implementieren: Hash-Modus und History Modus; vue2 bestimmt, welche Methode basierend auf dem Parameter mode verwendet werden soll, während vue3 den Parameter history verwendet. Im Folgenden erfahren Sie mehr über dieses Attribut. 🎜🎜🎜 li>

  Hash

  Kurze Beschreibung

  🎜🎜
  • 🎜vue-router Standard-Hash-Modus – Verwenden Sie URL-Hash, um eine vollständige URL zu simulieren, sodass die Seite nicht neu geladen wird, wenn sich die URL ändert. hash (#) ist der Ankerpunkt von URL, der eine Position auf der Webseite darstellt. Ändern Sie einfach den Teil nach # und dem Browser wird nur zur entsprechenden Position scrollen und die Webseite nicht neu laden. Mit anderen Worten: # wird zur Steuerung der Browseraktionen verwendet und ist für den Server völlig nutzlos. code> wird in der Anfrage nicht verwendet. Gleichzeitig wird jedes Mal, wenn der Teil nach # geändert wird, ein Datensatz hinzugefügt Verwenden Sie die Schaltfläche „Zurück“, um zur vorherigen Position zurückzukehren. Der hash-Modus rendert also unterschiedliche Daten an der angegebenen DOM-Position, indem er den Ankerpunktwert entsprechend ändert verschiedene Werte. 🎜
  • 🎜# Das Symbol selbst und die darauf folgenden Zeichen werden hash genannt und können über window.location.hash Lesen der Eigenschaft. 🎜

  Funktionen

  • hash Obwohl es in der URL erscheint, wird es nicht in die HTTP-Anfrage aufgenommen. Es wird zur Steuerung von Browseraktionen verwendet und ist auf der Serverseite völlig nutzlos. Daher wird die Seite durch Ändern des hash nicht neu geladenhash 虽然出现在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

    Sie können Überwachungsereignisse für Änderungen im hash hinzufügen : 🎜🎜rrreee🎜🎜Jedes Mal, wenn der Hash (window.location.hash) geändert wird, wird ein Datensatz zum Zugriffsverlauf des Browsers🎜🎜url mit einem # hinzugefügt Nummer. 🎜🎜

    🎜Einstellungen🎜🎜🎜🎜vue3-Einstellungen Hash Musterrouting

    🎜🎜🎜

    🎜history🎜 h2>

    🎜Kurze Beschreibung🎜🎜

    🎜🎜🎜history ist ein weiterer Routing-Modus. Da der Hash-Modus # in der URL enthält, wenn Sie dies nicht tun Wenn wir es möchten, können wir den history-Routingmodus verwenden. Wir müssen nur das Routing von vue hinzufügen, wenn wir die Regeln im Antwort-routerkonfigurieren > Der Standardwert ist der Hash-Modus. 🎜🎜Verwendung der neuen Methoden pushState() und replaceState() in der HTML5 History Interface. 🎜🎜Diese beiden Methoden werden auf den Verlaufsstapel des Browsers angewendet und bieten die Funktion zum Ändern des Verlaufsdatensatzes. Es ist nur so, dass der Browser bei Änderungen nicht sofort eine Anfrage an das Backend sendet, obwohl die aktuelle URL geändert wurde. 🎜🎜

    🎜Einstellungen🎜🎜

    🎜

    🎜Funktionen🎜🎜🎜🎜Routensprung erfordert kein Neuladen der Seite. 🎜🎜Ohne # denken die meisten Leute, dass es viel besser aussieht als Hash-Routing. 🎜🎜Die Kompatibilität ist nicht so gut wie Hash, was weiter unten erläutert wird🎜🎜

    🎜Probleme und Lösungen der Produktionsumgebung🎜🎜🎜🎜Wenn wir das Verlaufsprojekt auf dem Server bereitstellen, Zu diesem Zeitpunkt geben wir eine URL in den Browser ein (z. B. www.test.com). Zu diesem Zeitpunkt wird sie von DNS analysiert. Nachdem wir die IP-Adresse erhalten haben, initiieren wir eine Anfrage An den Server basierend auf der IP-Adresse, nachdem der Server die Anfrage erhalten hat, und dann die entsprechenden Ergebnisse (HTML, CSS, JS) zurückgeben. Wenn wir im Frontend eine Weiterleitung einrichten, springt die Seite zu www.test.com/home. Das Frontend gleicht die entsprechende Komponente ab und rendert sie auf der Seite. Wenn wir die Seite zu diesem Zeitpunkt aktualisieren, sendet der Browser eine neue Anfrage www.test.com/home. Wenn der Backend-Server keine Schnittstelle entsprechend /home hat, wird 404 zurückgegeben .

    🎜🎜 🎜Die Lösung für die Aktualisierung der Produktionsumgebung 404 kann durch Proxy-Weiterleitung in nginx erfolgen. Konfigurieren Sie nginx so, dass überprüft wird, ob die Ressourcen in den Parametern vorhanden sind. Lassen Sie nginx intern umleiten Projekthomepage.

    🎜🎜 🎜

    🎜Entwicklungsumgebung – HistoryApiFallback🎜🎜🎜🎜

    Einige Freunde fragen sich vielleicht, warum in der Entwicklungsumgebung dieses Problem nicht auftritt, derselbe Aktualisierungsvorgang wie in der Produktion ? 🎜

    🎜 🎜🎜

    Ich hatte auch hier Fragen, nachdem ich die relevanten Informationen überprüft hatte, stellte ich fest, dass webpack in vue-cli uns dabei geholfen hat, damit umzugehen 🎜

    🎜🎜🎜

    Wenn wir Ändern Sie diese Konfiguration auf „false“ und der Browser behandelt unsere Anfrage als Get-Anfrage. Wenn das Backend nicht über eine entsprechende Schnittstelle verfügt, wird die folgende Fehlermeldung angezeigt. 🎜

    🎜

    🎜🎜 🎜

    🎜Zusammenfassung🎜

    🎜🎜

    Bisher kennen wir die beiden Routing-Modi und die Unterscheidung von vue-roter, um es auszudrücken einfach: hash ist gut für die Routing-Kompatibilität, sieht aber mit # hässlich aus. histroy ist derselbe wie der normale URL-Pfad, muss aber separat auf dem Server konfiguriert werden. Jeder kann es je nach Bedarf und seinen eigenen Vorlieben nutzen. Studierende, die Fragen haben, können gerne im Kommentarbereich kommunizieren. 🎜

  (Teilen von Lernvideos: Web-Frontend-Entwicklung, Grundlegendes Programmiervideo)

Das obige ist der detaillierte Inhalt vonEine kurze Analyse des Unterschieds zwischen Hash und Verlauf beim Vue-Front-End-Routing. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!