Vue中Router路由兩種模式hash與history詳解
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>' break; case '/#b': document.querySelector('#app').innerHTML = '<h1>我是頁面2內容</h1>' break; case '/#c': 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)
history.forward() –> 等價於 history.go(1)
需要後臺配置支持, 如果輸入一個並不存在的url, 需要後端配置做 “兜底配置”, 不是粗暴的返回404, 而是返回首頁
開啟history模式
const router = new VueRouter({ mode: 'history', routes: [...] })
以上就是Vue中Router路由兩種模式hash與history詳解的詳細內容,更多關於Vue中Router路由模式的資料請關註WalkonNet其它相關文章!
推薦閱讀:
- vue-router中hash模式與history模式的區別
- JavaScript history 對象詳解
- vue-router如何實現history模式配置
- Vue.js 前端路由和異步組件介紹
- 10分鐘徹底搞懂微信小程序單頁面應用路由