Vue中Router路由兩種模式hash與history詳解
hash 模式 (默認(rèn))
工作原理: 監(jiān)聽網(wǎng)頁(yè)的hash值變化 —> onhashchange事件, 獲取location.hash
使用 URL 的 hash 來(lái)模擬一個(gè)完整的 URL，于是當(dāng) URL 改變時(shí)，頁(yè)面不會(huì)重新加載。
會(huì)給用戶好像跳轉(zhuǎn)了網(wǎng)頁(yè)一樣的感覺(jué), 但是實(shí)際上沒(méi)有跳轉(zhuǎn)
主要用在單頁(yè)面應(yīng)用(SPA)
// 模擬原理
// 監(jiān)聽頁(yè)面hash值變化
window.onhashchange = function(){
// 獲取當(dāng)前url的哈希值
const _hash = location.hash
// 根據(jù)不同的哈希值顯示不同的內(nèi)容
switch(_hash) {
case '/#a':
document.querySelector('#app').innerHTML = '<h1>我是頁(yè)面1內(nèi)容</h1>'
break;
case '/#b':
document.querySelector('#app').innerHTML = '<h1>我是頁(yè)面2內(nèi)容</h1>'
break;
case '/#c':
document.querySelector('#app').innerHTML = '<h1>我是頁(yè)面3內(nèi)容</h1>'
break;
}
}
history 模式
工作原理: 主要利用 history.pushState() API 來(lái)改變URL, 而不刷新頁(yè)面.
其實(shí)一共有五種模式可以實(shí)現(xiàn)改變URL, 而不刷新頁(yè)面.
history.pushState()
history.replaceState()
history.go()
history.back() --> 等價(jià)于 history.go(-1)
history.forward() --> 等價(jià)于 history.go(1)
需要后臺(tái)配置支持, 如果輸入一個(gè)并不存在的url, 需要后端配置做 “兜底配置”, 不是粗暴的返回404, 而是返回首頁(yè)
開啟history模式
const router = new VueRouter({
mode: 'history',
routes: [...]
})
以上就是Vue中Router路由兩種模式hash與history詳解的詳細(xì)內(nèi)容，更多關(guān)于Vue中Router路由模式的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
vue如何實(shí)現(xiàn)列表自動(dòng)滾動(dòng)、向上滾動(dòng)的效果(vue-seamless-scroll)
這篇文章主要介紹了vue如何實(shí)現(xiàn)列表自動(dòng)滾動(dòng)、向上滾動(dòng)的效果(vue-seamless-scroll)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
vant的picker組件設(shè)置文字超長(zhǎng)滾動(dòng)方式
這篇文章主要介紹了vant的picker組件設(shè)置文字超長(zhǎng)滾動(dòng)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要介紹了如何設(shè)置Vue全局公共方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
淺談Vue3 Composition API如何替換Vue Mixins
這篇文章主要介紹了淺談Vue3 Composition API如何替換Vue Mixins，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
Vue項(xiàng)目中使用jquery的簡(jiǎn)單方法
這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目中使用jquery的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用Vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
關(guān)于Uncaught(in?promise)TypeError:?list?is?not?iterable報(bào)錯(cuò)
這篇文章主要給大家介紹了關(guān)于Uncaught(in?promise)TypeError:?list?is?not?iterable報(bào)錯(cuò)的解決方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-08-08
解決vscode進(jìn)行vue格式化,會(huì)自動(dòng)補(bǔ)分號(hào)和雙引號(hào)的問(wèn)題
這篇文章主要介紹了解決vscode進(jìn)行vue格式化,會(huì)自動(dòng)補(bǔ)分號(hào)和雙引號(hào)的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10
Vue項(xiàng)目安裝less和less-loader的詳細(xì)步驟
這篇文章主要介紹了Vue項(xiàng)目安裝less和less-loader的詳細(xì)步驟，本文分步驟結(jié)合示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-12-12
這篇文章主要為大家詳細(xì)介紹了vue router路由嵌套不顯示的問(wèn)題，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下vue-router 路由嵌套不顯示問(wèn)題2017-06-06
這篇文章主要介紹了Vue.js 中制作自定義選擇組件的代碼附演示demo,通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-02-02