Vue中Router路由兩種模式hash與history詳解
更新時間：2021年09月23日 17:26:54 作者：SpringSir
這篇文章主要介紹了Vue中Router路由的兩種模式，分別對hash模式與history模式作了簡要分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助
hash 模式 (默認)
工作原理: 監(jiān)聽網(wǎng)頁的hash值變化 —> onhashchange事件, 獲取location.hash
使用 URL 的 hash 來模擬一個完整的 URL，于是當 URL 改變時，頁面不會重新加載。
會給用戶好像跳轉了網(wǎng)頁一樣的感覺, 但是實際上沒有跳轉
主要用在單頁面應用(SPA)
// 模擬原理
// 監(jiān)聽頁面hash值變化
window.onhashchange = function(){
// 獲取當前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, 而不刷新頁面.
其實一共有五種模式可以實現(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詳解的詳細內(nèi)容，更多關于Vue中Router路由模式的資料請關注腳本之家其它相關文章！
相關文章
vue如何實現(xiàn)列表自動滾動、向上滾動的效果(vue-seamless-scroll)
這篇文章主要介紹了vue如何實現(xiàn)列表自動滾動、向上滾動的效果(vue-seamless-scroll)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
這篇文章主要介紹了vant的picker組件設置文字超長滾動方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要介紹了如何設置Vue全局公共方法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
淺談Vue3 Composition API如何替換Vue Mixins
這篇文章主要介紹了淺談Vue3 Composition API如何替換Vue Mixins，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-04-04
這篇文章主要給大家介紹了關于Vue項目中使用jquery的相關資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用Vue具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-05-05
關于Uncaught(in?promise)TypeError:?list?is?not?iterable報錯
這篇文章主要給大家介紹了關于Uncaught(in?promise)TypeError:?list?is?not?iterable報錯的解決方法,文中通過示例代碼介紹的非常詳細,對大家學習或者工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-08-08
解決vscode進行vue格式化,會自動補分號和雙引號的問題
這篇文章主要介紹了解決vscode進行vue格式化,會自動補分號和雙引號的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
這篇文章主要介紹了Vue項目安裝less和less-loader的詳細步驟，本文分步驟結合示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-12-12
這篇文章主要為大家詳細介紹了vue router路由嵌套不顯示的問題，具有一定的參考價值，感興趣的小伙伴們可以參考一下vue-router 路由嵌套不顯示問題2017-06-06
這篇文章主要介紹了Vue.js 中制作自定義選擇組件的代碼附演示demo,通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2020-02-02