Lassen Sie uns über die beiden Routing-Modi von Vue sprechen (Hash und Verlauf).-View.js-php.cn

Lassen Sie uns über die beiden Routing-Modi von Vue sprechen (Hash und Verlauf).

Der Router verfügt über zwei Modi: einer ist der Hash-Modus und der andere ist der History-Modus code>vue-Projekt, das standardmäßig mit vue-cli und vue-router erstellt wird. Wenn keine spezielle Konfiguration vorgenommen wird, ist der Standardwert hash Code>Modus <code>hash模式、另一种是history模式，在使用vue-cli以及vue-router默认搭建的vue项目，如果不做特殊的配置，默认就是hash模式

这两种模式各有自己的优势，但他们的使用区别，却多多少少都会在面试当中被问到

今天就一起来学习下

哈希模式(hash)

vue-router默认hash模式,使用url的哈希(hash)来模拟一个完整的URL,当URL改变时,页面不会重新加载。【相关推荐：vuejs视频教程、web前端开发】

如下所示

http://localhost/#home

Nach dem Login kopieren

特点: #号后面的参数不会传送给服务器,兼容性好,不会作为路径的一部分发送给服务器,也就是它不会包括在HTTP请求体中,对后端完全没有影响,只是我们前端同学自己玩

页面刷新时,会停留在当前页面,不会重新加载

如果觉得hash路径很丑,不简洁,我们可以用路由的history模式,这种模式充分利用history.pushState API或replaceState,来完成,url跳转而无需重新加载页面

历史模式

history模式:在实例化配置对象中添加mode模式,值为history就可以了的经过改造后,hash模式就会变成history模式

const router = new VueRouter({
  mode: &#39;history&#39;,
  routes: [...]
})

Nach dem Login kopieren

这两种方式的使用都是没啥问题的,如果你在意浏览器url的颜值,#符号掺杂在url里看起来确实有些不优雅

如果你想url更好看,那么就使用history模式

但是:在hash模式下,使用hash符号之前的内容会被包含在请求体中,#号后面的不会发送给服务器

而history模式下,前端的URL必须和实际向后端发起请求的URL保持一致

如:https://itclan.cn/fontend/id,如果后端缺少没有对/fontend/id的路由处理,那么它将返回404错误

如果你想要支持history模式,那么需要后端同学支持,想要彻底解决404的问题,需要与后端同学协商,因为需要后端与前端路由做匹配

在服务端增加一个覆盖所有情况的时候的候选资源,如果url匹配不到任何静态资源,应该返回一个首页页面

如果出现404,容易让用户觉得这是一个Bug

如何解决前台刷新页面404问题

解决这个问题:如果你用的是Node做后端服务,那么在Node后台中可以加入一个中间件比如：connect-history-api-fallback即可解决这种404问题

如果是java或php,找后端同学,让后端路由与前端路由做匹配,或是用Ngnix做中间代理

如下这段简易的Node服务代码，可以命名为server.js,同时安装express以及connect-history-api-fallback中间件

启动后端服务执行命令node server.js

const express = require(&#39;express&#39;);
const history = require(&#39;connect-history-api-fallback&#39;)

const app = express()
app.use(history())
app.use(express.static(__dirname+&#39;/static&#39;));


app.listen(5005,(err)=> {
  if（！err）consle.log(&#39;服务器启动成功了&#39;)
})

Nach dem Login kopieren

把前端打包生成的dist文件内的代码,放到static中,通过这一操作,即可解决刷新页面,404的问题

对单页面spa的应用理解

我们的前端使用的vue-router中的两种模式,就是单页面应用,整个应用只有一个router路由器,是可以通过$router属性获取到

也就是说,整个应用只有一个完整的页面,同时,点击页面中的导航链接,不会刷新页面,只会是页面的局部更新

而我们页面中的数据,往往需要通过ajax请求来获取

现在开发的新项目,都是前后端分离,基本上都是单页面应用

总结

前端路由,有两种模式,一种是hash模式,另一种是history模式,其中hash模式是默认模式,#后面的不会发送给服务端,不会重新刷新加载页面,而history模式,url虽然比较好看,但是想要完整支持,需要后端同学提供支持,后端路由与前端的路由需要做匹配

否则部署到线上,一刷新页面,会出现404

Jeder dieser beiden Modi hat seine eigenen Vorteile, aber der Unterschied in ihrer Verwendung wird mehr oder weniger während des Interviews erfragt #🎜🎜##🎜🎜# Heutiger Steh auf und lerne #🎜🎜#

Hash-Modus (Hash)

#🎜🎜#vue-routerStandard-hash-Modus, verwendet den Hash von url (hash), um eine vollständige URL zu simulieren. Wenn sich URL ändert, ändert sich die Seite nicht neu laden. [Verwandte Empfehlungen: vuejs Video-Tutorial, Web-Frontend-Entwicklung】#🎜🎜##🎜🎜#wie unten gezeigt#🎜 🎜# rrreee#🎜🎜#Funktionen: Die Parameter nach der #-Nummer werden nicht an den Server gesendet. Sie sind gut kompatibel und werden nicht als gesendet Teil des Pfades, das heißt, es wird nicht an den Server gesendet. Es wird in den HTTP-Anforderungstext aufgenommen und hat überhaupt keine Auswirkungen auf das Backend. Am Ende spielen die Schüler alleine #🎜🎜##🎜🎜#, wenn die Seite aktualisiert wird, bleibt sie auf der aktuellen Seite und wird nicht neu geladen #🎜🎜##🎜🎜#Wenn Sie denken, dass der Hash-Pfad hässlich und nicht prägnant ist, können wir den Routing-Modus <code>history verwenden, der die pushState-API oder replaceStatevollständig nutzt >, um den Vorgang abzuschließen, springt url, ohne die Seite neu zu laden#🎜🎜#

Verlaufsmodus

#🎜🎜#history code> mode: Fügen Sie den <code>mode-Modus zum instanziierten Konfigurationsobjekt hinzu, und der Wert ist history Nach der Transformation wird der hash-Modus zum history-Modus #🎜🎜#rrreee#🎜🎜# Es ist kein Problem, diese beiden Methoden zu verwenden, wenn Sie darauf achten Erscheinungsbild des Browsers url, das in url eingemischte #-Symbol sieht etwas unelegant aus#🎜🎜##🎜🎜# Wenn Sie url, um besser auszusehen, dann verwenden Sie den history-Modus#🎜🎜##🎜🎜#Aber: Im hash-Modus verwenden Sie wird in den Anforderungstext eingefügt und der Inhalt nach der Nummer „#“ wird nicht an den Server #🎜🎜##🎜🎜# und history-Modus muss die Front-End-<code>URL mit der URL übereinstimmen, die tatsächlich eine Anfrage an das Back-End initiiert #🎜🎜##🎜🎜#Für Beispiel: https://itclan.cn/fontend/id, wenn dem Backend die Routing-Verarbeitung für /fontend/id fehlt, wird 404 zurückgegeben. code> error #🎜🎜 ##🎜🎜#Wenn Sie den <code>history-Modus unterstützen möchten, benötigen Sie die Unterstützung von Back-End-Klassenkameraden. Wenn Sie das 404-Problem vollständig lösen möchten, müssen Sie dies tun Verhandeln Sie mit den Back-End-Klassenkameraden,da das Back-End zum Matching mit dem Front-End-Routing kommunizieren muss#🎜🎜##🎜🎜#Fügen Sie eine Kandidatenressource auf dem Server hinzu, die alle Situationen abdeckt. Wenn url mit keiner statischen Ressource übereinstimmen kann, sollte eine Homepage zurückgegeben werden. Seite#🎜🎜##🎜🎜#Wenn 404 angezeigt wird, können Benutzer leicht denken, dass es sich um einen Fehler handelt#🎜🎜#

So lösen Sie das 404-Problem der Aktualisierung der Seite im Vordergrund

#🎜 🎜#Lösen Sie dieses Problem: Wenn Sie Node als Hintergrund verwenden Wenn Sie den Dienst beenden, können Sie eine Middleware zum Node-Hintergrund hinzufügen, z. B.: connect-history- api-fallback kann dieses 404-Problem lösen#🎜🎜##🎜🎜# Wenn es sich um java oder php handelt, suchen Sie einen Back-End-Klassenkameraden und lassen Sie die Back-End-Route und das Front-End-Routing übereinstimmen, oder verwenden Sie Ngnix code> als Zwischenproxy#🎜🎜##🎜🎜#Das Folgende ist ein einfacher <code>Knoten-Dienstcode, der server.js genannt werden kann, und installieren express und connect-history-api-fallback middleware#🎜🎜##🎜🎜#Starten Sie den Back-End-Dienstausführungsbefehl node server.js#🎜 🎜#rrreee#🎜🎜#Fügen Sie den Code in der vom Front-End-Paket generierten dist-Datei in static ein. Durch diesen Vorgang können Sie das Problem der Aktualisierung lösen Seite und 404#🎜🎜#

Verstehen der Anwendung von Single-Page-Spa

#🎜 🎜#Die beiden Modi in vue -router, die von unserem Frontend verwendet werden, sind Einzelseitenanwendungen. Die gesamte Anwendung verfügt nur über einen router-Router, auf den über das Attribut $router zugegriffen werden kann erhalten#🎜🎜##🎜🎜#Das heißt, die gesamte Anwendung hat nur eine vollständige Seite. Gleichzeitig wird durch Klicken auf den Navigationslink auf der Seite die Seite nicht aktualisiert, sondern nur eine teilweise Aktualisierung der Seite #🎜 🎜##🎜🎜#Die Daten auf unserer Seite müssen oft über eine ajax-Anfrage abgerufen werden#🎜🎜##🎜🎜#Die jetzt entwickelten neuen Projekte sind alle vom Front- und Back-End getrennt Im Grunde handelt es sich um eine einseitige Anwendung. #🎜🎜#

Zusammenfassung

#🎜🎜#Front-End-Routing, es gibt zwei Modi, einer ist der hash-Modus. Der andere ist der history-Modus, in dem der hash-Modus der Standardmodus ist. Was folgt, ist # wird nicht an den Server gesendet und die Seite wird nicht aktualisiert und geladen, und im history-Modus sieht url besser aus, aber für eine vollständige Unterstützung müssen Back-End-Studenten dies tun Bereitstellung von Unterstützung, und Back-End-Routing und Front-End-Routing müssen aufeinander abgestimmt sein 🎜#

(Teilen von Lernvideos: Vuejs-Einführungs-Tutorial, Grundlegendes Programmiervideo)

Das obige ist der detaillierte Inhalt vonLassen Sie uns über die beiden Routing-Modi von Vue sprechen (Hash und Verlauf).. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!