關于vue中hash和history的區(qū)別與使用圖文詳解
更新時間：2023年03月29日 15:29:08 作者：cc.ChenLy
vue-router中有hash模式和history模式,下面這篇文章主要給大家介紹了關于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值，再做進一步處理 HistoryRouter的原理：通過history.pushState 使用它做頁面跳轉不會觸發(fā)頁面刷新，使用window.onpopstate 監(jiān)聽瀏覽器的前進和后退，再做其他處理
二、使用
舉例說明history模式
1、現(xiàn)有一個這樣的頁面（Vue2）
2、設置路由模式
3、打包
使用webpack的npm build命令，生成以下文件
4、模擬一個服務器（nodejs的express）
初始化
調試
5、把打包好的文件放到服務器
6、訪問，路由跳轉不涉及網絡請求
7、刷新頁面，資源請求失敗，發(fā)送網絡請求/MyHome/message/details/1/message001失敗
因為服務器上沒有這個請求（history模式存在這個問題，hash模式則無）
8、解決辦法
使用connect-history,根據npm官方文檔
9、再次調試，刷新后依舊沒問題
總結
到此這篇關于vue中hash和history的區(qū)別與使用的文章就介紹到這了,更多相關hash和history的區(qū)別與使用內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
nuxt 實現(xiàn)在其它js文件中使用store的方式
這篇文章主要介紹了nuxt 實現(xiàn)在其它js文件中使用store的方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
SCSS是一種CSS預處理語言,定義了一種新的專門的編程語言,編譯后形成正常的css文件,為css增加一些編程特性,這篇文章主要給大家介紹了關于在vue項目中引入scss并使用scss樣式的相關資料,需要的朋友可以參考下2022-07-07
本篇文章主要介紹了vue.js組件化開發(fā)實踐，小編覺得挺不錯的，現(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格式的視頻，幫助大家更好的理解和學習使用vue，感興趣的朋友可以了解下2021-02-02
IndexedDB 是一個瀏覽器內建的數(shù)據庫,它可以存放對象格式的數(shù)據,默認情況下,瀏覽器會將自身所在的硬盤位置剩余容量全部作為indexedDB的存儲容量,本文給大家介紹了Vue3使用indexDB緩存靜態(tài)資源,需要的朋友可以參考下2024-10-10
詳解探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 構建記事本應用
本篇文章主要介紹了詳解探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 構建記事本應用 ，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
這篇文章主要為大家詳細介紹了vue-hook-form的使用方法，以及如何安裝vue-hook-form，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-04-04
這篇文章主要為大家詳細介紹了Vue組件化學習之scoped，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02