vue中history和hash的區(qū)別有哪些

本篇內(nèi)容主要講解“vue中history和hash的區(qū)別有哪些”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“vue中history和hash的區(qū)別有哪些”吧!

區(qū)別：1、hash路由再地址欄URL上有“#”，而history路由沒有；2、進(jìn)行回車刷新操作時(shí)，hash路由會(huì)加載到地址欄對(duì)應(yīng)的頁(yè)面，而history路由一般會(huì)出現(xiàn)404錯(cuò)誤；3、hash支持一些低版本的瀏覽器，而history不支持。

本文操作環(huán)境：windows10系統(tǒng)、Vue2.9.6版，DELL G3電腦。

vue中history和hash的區(qū)別

• 1.hash路由在地址欄URL上有#，用 window.location.hash 讀取。而history路由沒有會(huì)好看一點(diǎn)

• 2.我們進(jìn)行回車刷新操作，hash路由會(huì)加載到地址欄對(duì)應(yīng)的頁(yè)面，而history路由一般就404報(bào)錯(cuò)了（刷新是網(wǎng)絡(luò)請(qǐng)求，沒有后端準(zhǔn)備時(shí)會(huì)報(bào)錯(cuò)）。

• 3.hash路由支持低版本的瀏覽器，而history路由是HTML5新增的API。

• 4.hash的特點(diǎn)在于它雖然出現(xiàn)在了URL中，但是不包括在http請(qǐng)求中，所以對(duì)于后端是沒有一點(diǎn)影響的，所以改變hash不會(huì)重新加載頁(yè)面，所以這也是單頁(yè)面應(yīng)用的必備。

• 5.history運(yùn)用了瀏覽器的歷史記錄棧，之前有back,forward,go方法，之后在HTML5中新增了pushState（）和replaceState（）方法，它們提供了對(duì)歷史記錄進(jìn)行修改的功能，不過在進(jìn)行修改時(shí)，雖然改變了當(dāng)前的URL，但是瀏覽器不會(huì)馬上向后端發(fā)送請(qǐng)求。

• 6.history的這種模式需要后臺(tái)配置支持。比如：當(dāng)我們進(jìn)行項(xiàng)目的主頁(yè)的時(shí)候，一切正常，可以訪問，但是當(dāng)我們刷新頁(yè)面或者直接訪問路徑的時(shí)候就會(huì)返回404，那是因?yàn)樵趆istory模式下，只是動(dòng)態(tài)的通過js操作window.history來(lái)改變?yōu)g覽器地址欄里的路徑，并沒有發(fā)起http請(qǐng)求，但是當(dāng)我直接在瀏覽器里輸入這個(gè)地址的時(shí)候，就一定要對(duì)服務(wù)器發(fā)起http請(qǐng)求，但是這個(gè)目標(biāo)在服務(wù)器上又不存在，所以會(huì)返回404

到此，相信大家對(duì)“vue中history和hash的區(qū)別有哪些”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！