Vue中Router路由的hash模式與history模式是怎樣的

Vue中Router路由的hash模式與history模式是怎樣的，相信很多沒有經(jīng)驗的人對此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個問題。

hash 模式 (默認)

工作原理:監(jiān)聽網(wǎng)頁的hash值變化 —>onhashchange事件, 獲取location.hash

使用 URL 的 hash 來模擬一個完整的 URL，于是當 URL 改變時，頁面不會重新加載。

會給用戶好像跳轉(zhuǎn)了網(wǎng)頁一樣的感覺, 但是實際上沒有跳轉(zhuǎn)

主要用在單頁面應(yīng)用(SPA)

// 模擬原理
// 監(jiān)聽頁面hash值變化
window.onhashchange = function(){
	// 獲取當前url的哈希值 
	const _hash = location.hash
	// 根據(jù)不同的哈希值顯示不同的內(nèi)容
	switch(_hash) {
	     case '/#a':
	        document.querySelector('#app').innerHTML = '<h2>我是頁面1內(nèi)容</h2>'
	        break;
	     case '/#b':
	        document.querySelector('#app').innerHTML = '<h2>我是頁面2內(nèi)容</h2>'
	        break;
	     case '/#c':
	        document.querySelector('#app').innerHTML = '<h2>我是頁面3內(nèi)容</h2>'
	        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: [...]
})

看完上述內(nèi)容，你們掌握Vue中Router路由的hash模式與history模式是怎樣的的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！