hash 模式 (預設)

工作原理: 監聽的hash值變化 —> onhashchange事件,獲取location.hash

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

會給使用者好像跳轉了網頁一樣的感覺,但是實際上沒有跳轉

主要用在單頁面應用(SPA)

// 模擬原理
// 監聽頁面hash值變化
window.onhashchange = function(){
	// 獲取當前url的雜湊值 
	const _hash = location.hash
	// 根據不同的雜湊值顯示不同的內容
	switch(_hash) {
	     case '/#a':
	        document.querySelector('#app').innerHTML = '<h1>我是頁面1內容</h1>'
	        breakwww.cppcns.com
 
;
	     case '/#b':
	        document.querySelector('#app').innerHTML = '<h1>我是頁面2內容</h1>'
	        break;
	     case '/#c'www.cppcns.com:
	        document.querySelector('#app').innerHTML = '<h1>我是頁面3內容</h1>'
	        break;
	} 
}

history 模式

工作原理: 主要利用 history.pushState() API 來改變URL,而不重新整理頁面.

其實一共有五種模式可以實現改變URL,而不重新整理頁面.

history.pushState()

history.replaceState()

history.go()

history.back() --> 等價於 history.go(-1)

histowww.cppcns.comry.forward() --> 等價於 history.go(1)

需要後臺配置支援,如果輸入一個並不存在的url,需要後端配置做 “兜底配置”,不是粗暴的返回404,而是返回首頁

開啟history模式

cwww.cppcns.comonst router = new Router({
  mode: 'history',routes: [...]
})

以上就是Vue中Router路由兩種模式hash與history詳解的詳細內容，更多關於Vue中Router路由模式的資料請關注我們其它相關文章！