關(guān)于vue中hash和history的區(qū)別與使用圖文詳解
一、區(qū)別
1、 history和hash都是利用瀏覽器的兩種特性實(shí)現(xiàn)前端路由，history是利用瀏覽歷史記錄棧的API實(shí)現(xiàn)，hash是監(jiān)聽location對象hash值變化事件來實(shí)現(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失敗
因?yàn)榉?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)文章
nuxt 實(shí)現(xiàn)在其它js文件中使用store的方式
這篇文章主要介紹了nuxt 實(shí)現(xiàn)在其它js文件中使用store的方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
在vue項(xiàng)目中引入scss并使用scss樣式詳解
SCSS是一種CSS預(yù)處理語言,定義了一種新的專門的編程語言,編譯后形成正常的css文件,為css增加一些編程特性,這篇文章主要給大家介紹了關(guān)于在vue項(xiàng)目中引入scss并使用scss樣式的相關(guān)資料,需要的朋友可以參考下2022-07-07
本篇文章主要介紹了vue.js組件化開發(fā)實(shí)踐，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-12-12
這篇文章主要介紹了vue中Echarts圖表寬度沒占滿的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
vite.config.js或者vue.config.js配置方式
這篇文章主要介紹了vite.config.js或者vue.config.js配置方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了如何在vue中使用video.js 播放m3u8格式的視頻，幫助大家更好的理解和學(xué)習(xí)使用vue，感興趣的朋友可以了解下2021-02-02
IndexedDB 是一個瀏覽器內(nèi)建的數(shù)據(jù)庫,它可以存放對象格式的數(shù)據(jù),默認(rèn)情況下,瀏覽器會將自身所在的硬盤位置剩余容量全部作為indexedDB的存儲容量,本文給大家介紹了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)用 ，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
這篇文章主要為大家詳細(xì)介紹了vue-hook-form的使用方法，以及如何安裝vue-hook-form，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-04-04
這篇文章主要為大家詳細(xì)介紹了Vue組件化學(xué)習(xí)之scoped，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02