關(guān)于vue中hash和history的區(qū)別與使用圖文詳解
一、區(qū)別
1、 history和hash都是利用瀏覽器的兩種特性實(shí)現(xiàn)前端路由，history是利用瀏覽歷史記錄棧的API實(shí)現(xiàn)，hash是監(jiān)聽(tīng)location對(duì)象hash值變化事件來(lái)實(shí)現(xiàn)
2、 history的url沒(méi)有’#'號(hào)，hash反之
3、 相同的url，history會(huì)觸發(fā)添加到瀏覽器歷史記錄棧中，hash不會(huì)觸發(fā)，history需要后端配合，如果后端不配合刷新新頁(yè)面會(huì)出現(xiàn)404，hash不需要
4、
HashRouter的原理：通過(guò)window.onhashchange方法獲取新URL中hash值，再做進(jìn)一步處理 HistoryRouter的原理：通過(guò)history.pushState 使用它做頁(yè)面跳轉(zhuǎn)不會(huì)觸發(fā)頁(yè)面刷新，使用window.onpopstate 監(jiān)聽(tīng)瀏覽器的前進(jìn)和后退，再做其他處理
二、使用
舉例說(shuō)明history模式
1、現(xiàn)有一個(gè)這樣的頁(yè)面（Vue2）
2、設(shè)置路由模式
3、打包
使用webpack的npm build命令，生成以下文件
4、模擬一個(gè)服務(wù)器（nodejs的express）
初始化
調(diào)試
5、把打包好的文件放到服務(wù)器
6、訪問(wèn)，路由跳轉(zhuǎn)不涉及網(wǎng)絡(luò)請(qǐng)求
7、刷新頁(yè)面，資源請(qǐng)求失敗，發(fā)送網(wǎng)絡(luò)請(qǐng)求/MyHome/message/details/1/message001失敗
因?yàn)榉?wù)器上沒(méi)有這個(gè)請(qǐng)求（history模式存在這個(gè)問(wèn)題，hash模式則無(wú)）
8、解決辦法
使用connect-history,根據(jù)npm官方文檔
9、再次調(diào)試，刷新后依舊沒(méi)問(wèn)題
總結(jié)
到此這篇關(guān)于vue中hash和history的區(qū)別與使用的文章就介紹到這了,更多相關(guān)hash和history的區(qū)別與使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
nuxt 實(shí)現(xiàn)在其它js文件中使用store的方式
這篇文章主要介紹了nuxt 實(shí)現(xiàn)在其它js文件中使用store的方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
在vue項(xiàng)目中引入scss并使用scss樣式詳解
SCSS是一種CSS預(yù)處理語(yǔ)言,定義了一種新的專門(mén)的編程語(yǔ)言,編譯后形成正常的css文件,為css增加一些編程特性,這篇文章主要給大家介紹了關(guān)于在vue項(xiàng)目中引入scss并使用scss樣式的相關(guān)資料,需要的朋友可以參考下2022-07-07
本篇文章主要介紹了vue.js組件化開(kāi)發(fā)實(shí)踐，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-12-12
vue中Echarts圖表寬度沒(méi)占滿的問(wèn)題
這篇文章主要介紹了vue中Echarts圖表寬度沒(méi)占滿的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
vite.config.js或者vue.config.js配置方式
這篇文章主要介紹了vite.config.js或者vue.config.js配置方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了如何在vue中使用video.js 播放m3u8格式的視頻，幫助大家更好的理解和學(xué)習(xí)使用vue，感興趣的朋友可以了解下2021-02-02
IndexedDB 是一個(gè)瀏覽器內(nèi)建的數(shù)據(jù)庫(kù),它可以存放對(duì)象格式的數(shù)據(jù),默認(rèn)情況下,瀏覽器會(huì)將自身所在的硬盤(pán)位置剩余容量全部作為indexedDB的存儲(chǔ)容量,本文給大家介紹了Vue3使用indexDB緩存靜態(tài)資源,需要的朋友可以參考下2024-10-10
詳解探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 構(gòu)建記事本應(yīng)用
本篇文章主要介紹了詳解探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 構(gòu)建記事本應(yīng)用 ，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
這篇文章主要為大家詳細(xì)介紹了vue-hook-form的使用方法，以及如何安裝vue-hook-form，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-04-04
這篇文章主要為大家詳細(xì)介紹了Vue組件化學(xué)習(xí)之scoped，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-02-02