關(guān)于vue中hash和history的區(qū)別與使用圖文詳解
一、區(qū)別
1、 history和hash都是利用瀏覽器的兩種特性實現(xiàn)前端路由，history是利用瀏覽歷史記錄棧的API實現(xiàn)，hash是監(jiān)聽location對象hash值變化事件來實現(xiàn)
2、 history的url沒有’#'號，hash反之
3、 相同的url，history會觸發(fā)添加到瀏覽器歷史記錄棧中，hash不會觸發(fā)，history需要后端配合，如果后端不配合刷新新頁面會出現(xiàn)404，hash不需要
4、
HashRouter的原理：通過window.onhashchange方法獲取新URL中hash值，再做進(jìn)一步處理 HistoryRouter的原理：通過history.pushState 使用它做頁面跳轉(zhuǎn)不會觸發(fā)頁面刷新，使用window.onpopstate 監(jiān)聽瀏覽器的前進(jìn)和后退，再做其他處理
二、使用
舉例說明history模式
1、現(xiàn)有一個這樣的頁面（Vue2）
2、設(shè)置路由模式
3、打包
使用webpack的npm build命令，生成以下文件
4、模擬一個服務(wù)器（nodejs的express）
初始化
調(diào)試
5、把打包好的文件放到服務(wù)器
6、訪問，路由跳轉(zhuǎn)不涉及網(wǎng)絡(luò)請求
7、刷新頁面，資源請求失敗，發(fā)送網(wǎng)絡(luò)請求/MyHome/message/details/1/message001失敗
因為服務(wù)器上沒有這個請求（history模式存在這個問題，hash模式則無）
8、解決辦法
使用connect-history,根據(jù)npm官方文檔
9、再次調(diào)試，刷新后依舊沒問題
總結(jié)
到此這篇關(guān)于vue中hash和history的區(qū)別與使用的文章就介紹到這了,更多相關(guān)hash和history的區(qū)別與使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)頭像上傳功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
假設(shè)?App?的用戶可以在短時間內(nèi)進(jìn)行多個?API?調(diào)用,但您只想顯示上次調(diào)用的結(jié)果,之前正在進(jìn)行的請求變得無關(guān)緊要,在這種情況下,您可以利用?Axios?攔截器,本文給大家介紹了如何使用Axios攔截器中止Vue請求,需要的朋友可以參考下2023-11-11
vue等兩個接口都返回結(jié)果再執(zhí)行下一步的實例
這篇文章主要介紹了vue等兩個接口都返回結(jié)果再執(zhí)行下一步的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
vue子元素綁定的事件, 阻止觸發(fā)父級上的事件處理方式
這篇文章主要介紹了vue子元素綁定的事件, 阻止觸發(fā)父級上的事件處理方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
本文通過實例代碼給大家介紹了Vue創(chuàng)建頭部組件的相關(guān)知識，非常不錯，具有一定的參考借鑒價值 ,需要的朋友可以參考下2018-10-10
這篇文章主要介紹了vue中Promise的使用方法詳情，Promise可以說是異步編程的一種解決方法,主要是為了解決代碼亂的情景而出現(xiàn)的,下文介紹其具體用法，需要的小伙伴可以參考一下2022-03-03
在現(xiàn)代網(wǎng)頁開發(fā)中,常常需要實現(xiàn)高亮顯示關(guān)鍵詞的功能,這篇文章將探討如何通過?Vue.js?中的?highlightText來實現(xiàn)這一功能,感興趣的可以了解下2024-12-12
Vue3中Watch、Watcheffect、Computed的使用和區(qū)別解析
Watch、Watcheffect、Computed各有優(yōu)劣,選擇使用哪種方法取決于應(yīng)用場景和需求,watch?適合副作用操作,watchEffect適合簡單的自動副作用管理,computed?適合聲明式的派生狀態(tài)計算,本文通過場景分析Vue3中Watch、Watcheffect、Computed的使用和區(qū)別,感興趣的朋友一起看看吧2024-07-07
這篇文章主要介紹了Vue中的反向代理，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
今天小編就為大家分享一篇解決vue-cli腳手架打包后vendor文件過大的問題。具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09