Vue?前端路由工作原理hash與history的區(qū)別
什么是路由？
路由分兩種：
- 前端路由：Hash 地址與組件之間的對應(yīng)關(guān)系
- 后端路由：瀏覽器 請求地址+請求方式 與 后端 業(yè)務(wù)邏輯 之間的一個映射關(guān)系
SPA與前端路由：
SPA (單頁面應(yīng)用，全稱為：Single-page Web applications) 指的是一個 web 網(wǎng)站只有唯一的一個 HTML 頁面，所有組件的展示與切換都在這唯一的一個頁面內(nèi)完成，此時，不同組件之間的切換需要通過前端路由來實現(xiàn)
vue-router的工作原理
vue-router通過hash與History interface兩種方式實現(xiàn)前端路由，更新視圖但不重新請求頁面”是前端路由原理的核心之一，目前在瀏覽器環(huán)境中這一功能的實現(xiàn)主要有兩種方式：
- 利用URL中的hash（“#”）
- 利用History interface在 HTML5中新增的方法
在vue-router中，它提供了mode參數(shù)來決定采用哪一種方式 mode參數(shù)：
- 默認(rèn)hash
- 手動設(shè)置為history
router/index.js文件代碼
那么，兩者的區(qū)別是什么呢？
1.mode：'hash',在URL中會多'#'
- vue-router默認(rèn)為hash模式，使用URL的hash來模擬一個完整的URL,當(dāng)URL改變時，頁面不會重新加載。#就是hash符號，中文名為哈希符或者錨點(diǎn)，在hash符號后的值稱為hash值。
- 路由的hash模式是利用了window可以監(jiān)聽onhashchange事件來實現(xiàn)的，也就是說hash值是用來指導(dǎo)瀏覽器動作的，對服務(wù)器沒有影響，HTTP 請求中也不會包括hash值，同時每一次改變hash值，都會在瀏覽器的訪問歷史中增加一個記錄，使用“后退”按鈕，就可以回到上一個位置。所以，hash 模式是根據(jù)hash值來發(fā)生改變，根據(jù)不同的值，渲染指定DOM位置的不同數(shù)據(jù)。
2.mode:'history'
- 當(dāng)你使用 history 模式時，URL 就像正常的 url，例如
http://yoursite.com/user/id，也好看！
不過這種模式要玩好，還需要后臺配置支持。因為我們的應(yīng)用是個單頁客戶端應(yīng)用，如果后臺沒有正確的配置，當(dāng)用戶在瀏覽器直接訪問 http://oursite.com/user/id 就會返回 404，這就不好看了。
所以呢，你要在服務(wù)端增加一個覆蓋所有情況的候選資源：如果 URL 匹配不到任何靜態(tài)資源，則應(yīng)該返回同一個 index.html 頁面，這個頁面就是你 app 依賴的頁面
到此這篇關(guān)于Vue 前端路由工作原理hash與history的區(qū)別的文章就介紹到這了,更多相關(guān)Vue hash與history內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue中點(diǎn)擊按鈕下載文件，本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-10-10
本文通過實例代碼給大家介紹了在vue中使用echarts圖表的方法，需要注意的事項文中給大家提到,需要的朋友可以參考下2018-10-10
這篇文章主要為大家詳細(xì)介紹了Proxy中代理數(shù)據(jù)攔截的方法，文中的示例代碼講解詳細(xì)，對我們學(xué)習(xí)或工作具有一定的借鑒價值，需要的可以參考一下2022-12-12
這篇文章主要為大家詳細(xì)介紹了Vue3中使用dataV報錯問題的解決方法,文中的示例代碼講解詳細(xì),具有一定的學(xué)習(xí)價值,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-11-11
BEM是一種前端命名方法論,主要是針對CSS,意思是塊（Block）、元素（Element）、修飾符（Modifier）的簡寫,這種命名方法讓CSS便于統(tǒng)一團(tuán)隊開發(fā)規(guī)范和方便維護(hù),本文給大家介紹了Vue3配置bem樣式架構(gòu),需要的朋友可以參考下2024-10-10
Vue3 setup語法糖銷毀一個或多個定時器(setTimeout/setInterval)
這篇文章主要給大家介紹了關(guān)于Vue3 setup語法糖銷毀一個或多個定時器(setTimeout/setInterval)的相關(guān)資料,vue是單頁面應(yīng)用,路由切換后,定時器并不會自動關(guān)閉,需要手動清除,當(dāng)頁面被銷毀時,清除定時器即可,需要的朋友可以參考下2023-10-10
vue vantUI實現(xiàn)文件（圖片、文檔、視頻、音頻）上傳（多文件）
這篇文章主要介紹了vue vantUI實現(xiàn)文件（圖片、文檔、視頻、音頻）上傳（多文件），文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
這篇文章主要通過示例和大家一起淺析一下Vue3的響應(yīng)式原理，文中的示例代碼講解詳細(xì)，對我們學(xué)習(xí)Vue3有一定幫助，需要的可以參考一下2022-08-08
vue中使用element組件時事件想要傳遞其他參數(shù)的問題
這篇文章主要介紹了vue中使用element組件時事件想要傳遞其他參數(shù)的問題,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2019-09-09
vue3?el-table結(jié)合seamless-scroll實現(xiàn)表格數(shù)據(jù)滾動的思路詳解
這篇文章主要介紹了vue3?el-table結(jié)合seamless-scroll實現(xiàn)表格數(shù)據(jù)滾動,創(chuàng)建兩個table，隱藏第一個table的body部分，這樣就能得到一個固定的head，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-07-07