Vue中Router路由兩種模式hash與history詳解
hash 模式 (默認(rèn))
工作原理: 監(jiān)聽網(wǎng)頁的hash值變化 —> onhashchange事件, 獲取location.hash
使用 URL 的 hash 來模擬一個完整的 URL，于是當(dāng) URL 改變時，頁面不會重新加載。
會給用戶好像跳轉(zhuǎn)了網(wǎng)頁一樣的感覺, 但是實(shí)際上沒有跳轉(zhuǎn)
主要用在單頁面應(yīng)用(SPA)
// 模擬原理
// 監(jiān)聽頁面hash值變化
window.onhashchange = function(){
// 獲取當(dāng)前url的哈希值
const _hash = location.hash
// 根據(jù)不同的哈希值顯示不同的內(nèi)容
switch(_hash) {
case '/#a':
document.querySelector('#app').innerHTML = '<h1>我是頁面1內(nèi)容</h1>'
break;
case '/#b':
document.querySelector('#app').innerHTML = '<h1>我是頁面2內(nèi)容</h1>'
break;
case '/#c':
document.querySelector('#app').innerHTML = '<h1>我是頁面3內(nèi)容</h1>'
break;
}
}
history 模式
工作原理: 主要利用 history.pushState() API 來改變URL, 而不刷新頁面.
其實(shí)一共有五種模式可以實(shí)現(xiàn)改變URL, 而不刷新頁面.
history.pushState()
history.replaceState()
history.go()
history.back() --> 等價于 history.go(-1)
history.forward() --> 等價于 history.go(1)
需要后臺配置支持, 如果輸入一個并不存在的url, 需要后端配置做 “兜底配置”, 不是粗暴的返回404, 而是返回首頁
開啟history模式
const router = new VueRouter({
mode: 'history',
routes: [...]
})
以上就是Vue中Router路由兩種模式hash與history詳解的詳細(xì)內(nèi)容，更多關(guān)于Vue中Router路由模式的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
vue實(shí)現(xiàn)動態(tài)表單動態(tài)渲染組件的方式(1)
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)動態(tài)表單動態(tài)渲染組件的方式，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
Vue render渲染時間戳轉(zhuǎn)時間,時間轉(zhuǎn)時間戳及渲染進(jìn)度條效果
這篇文章主要介紹了Vue render渲染時間戳轉(zhuǎn)時間,時間轉(zhuǎn)時間戳及渲染進(jìn)度條效果,通過實(shí)例代碼相結(jié)合的形式給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2018-07-07
vue中使用element-ui進(jìn)行表單驗(yàn)證的實(shí)例代碼
這篇文章主要介紹了vue中使用element-ui進(jìn)行表單驗(yàn)證的實(shí)例代碼，本文給大家分享實(shí)現(xiàn)思路，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-06-06
Vue-pdf實(shí)現(xiàn)在線預(yù)覽PDF文件
這篇文章主要為大家詳細(xì)介紹了Vue-pdf實(shí)現(xiàn)在線預(yù)覽PDF文件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-05-05
關(guān)于Vue?監(jiān)控數(shù)組的問題
這篇文章主要介紹了Vue?監(jiān)控數(shù)組的示例,主要包括Vue?是如何追蹤數(shù)據(jù)發(fā)生變化，Vue?如何更新數(shù)組以及為什么有些數(shù)組的數(shù)據(jù)變更不能被?Vue?監(jiān)測到，對vue監(jiān)控數(shù)組知識是面試比較常見的問題，感興趣的朋友一起看看吧2022-05-05
這篇文章主要為大家詳細(xì)介紹了vue-cli之router基本使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10
table作為數(shù)據(jù)展示組件,在日常開發(fā)中經(jīng)常被用到,這篇文章主要給大家介紹了關(guān)于vue.js管理后臺table組件封裝的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-08-08
Vue3新特性Suspense和Teleport應(yīng)用場景分析
本文介紹了Vue2和Vue3中的Suspense用于處理異步請求的加載提示,以及如何在組件間實(shí)現(xiàn)動態(tài)加載,同時,Teleport技術(shù)展示了如何在DOM中靈活地控制組件的渲染位置,解決布局問題,感興趣的朋友跟隨小編一起看看吧2024-07-07
這篇文章主要介紹了vue3中的ref和reactive定義數(shù)組方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
使用ElementUI el-upload實(shí)現(xiàn)一次性上傳多個文件
在日常的前端開發(fā)中,文件上傳是一個非常常見的需求,尤其是在用戶需要一次性上傳多個文件的場景下,ElementUI作為一款非常優(yōu)秀的Vue.js 2.0組件庫,為我們提供了豐富的UI組件,本文介紹了如何使用ElementUI el-upload實(shí)現(xiàn)一次性上傳多個文件,需要的朋友可以參考下2024-08-08