Vue中Router路由兩種模式hash與history詳解
hash 模式 (默認(rèn))
工作原理: 監(jiān)聽(tīng)網(wǎng)頁(yè)的hash值變化 —> onhashchange事件, 獲取location.hash
使用 URL 的 hash 來(lái)模擬一個(gè)完整的 URL，于是當(dāng) URL 改變時(shí)，頁(yè)面不會(huì)重新加載。
會(huì)給用戶(hù)好像跳轉(zhuǎn)了網(wǎng)頁(yè)一樣的感覺(jué), 但是實(shí)際上沒(méi)有跳轉(zhuǎn)
主要用在單頁(yè)面應(yīng)用(SPA)
// 模擬原理
// 監(jiān)聽(tīng)頁(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è)
開(kāi)啟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)態(tài)表單動(dòng)態(tài)渲染組件的方式(1)
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)動(dòng)態(tài)表單動(dòng)態(tài)渲染組件的方式，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
Vue render渲染時(shí)間戳轉(zhuǎn)時(shí)間,時(shí)間轉(zhuǎn)時(shí)間戳及渲染進(jìn)度條效果
這篇文章主要介紹了Vue render渲染時(shí)間戳轉(zhuǎn)時(shí)間,時(shí)間轉(zhuǎn)時(shí)間戳及渲染進(jìn)度條效果,通過(guò)實(shí)例代碼相結(jié)合的形式給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-07-07
vue中使用element-ui進(jìn)行表單驗(yàn)證的實(shí)例代碼
這篇文章主要介紹了vue中使用element-ui進(jìn)行表單驗(yàn)證的實(shí)例代碼，本文給大家分享實(shí)現(xiàn)思路，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-06-06
Vue-pdf實(shí)現(xiàn)在線預(yù)覽PDF文件
這篇文章主要為大家詳細(xì)介紹了Vue-pdf實(shí)現(xiàn)在線預(yù)覽PDF文件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-05-05
關(guān)于Vue?監(jiān)控?cái)?shù)組的問(wèn)題
這篇文章主要介紹了Vue?監(jiān)控?cái)?shù)組的示例,主要包括Vue?是如何追蹤數(shù)據(jù)發(fā)生變化，Vue?如何更新數(shù)組以及為什么有些數(shù)組的數(shù)據(jù)變更不能被?Vue?監(jiān)測(cè)到，對(duì)vue監(jiān)控?cái)?shù)組知識(shí)是面試比較常見(jiàn)的問(wèn)題，感興趣的朋友一起看看吧2022-05-05
這篇文章主要為大家詳細(xì)介紹了vue-cli之router基本使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-10-10
table作為數(shù)據(jù)展示組件,在日常開(kāi)發(fā)中經(jīng)常被用到,這篇文章主要給大家介紹了關(guān)于vue.js管理后臺(tái)table組件封裝的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-08-08
Vue3新特性Suspense和Teleport應(yīng)用場(chǎng)景分析
本文介紹了Vue2和Vue3中的Suspense用于處理異步請(qǐng)求的加載提示,以及如何在組件間實(shí)現(xiàn)動(dòng)態(tài)加載,同時(shí),Teleport技術(shù)展示了如何在DOM中靈活地控制組件的渲染位置,解決布局問(wèn)題,感興趣的朋友跟隨小編一起看看吧2024-07-07
這篇文章主要介紹了vue3中的ref和reactive定義數(shù)組方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
使用ElementUI el-upload實(shí)現(xiàn)一次性上傳多個(gè)文件
在日常的前端開(kāi)發(fā)中,文件上傳是一個(gè)非常常見(jiàn)的需求,尤其是在用戶(hù)需要一次性上傳多個(gè)文件的場(chǎng)景下,ElementUI作為一款非常優(yōu)秀的Vue.js 2.0組件庫(kù),為我們提供了豐富的UI組件,本文介紹了如何使用ElementUI el-upload實(shí)現(xiàn)一次性上傳多個(gè)文件,需要的朋友可以參考下2024-08-08