建站
咨詢
售后
建站咨詢
新聞中心
這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
vue-router的hash和history模式怎么區(qū)分-創(chuàng)新互聯(lián)
本篇文章給大家分享的是有關vue-router的hash和history模式怎么區(qū)分，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。
一、概念
為了構建 SPA（單頁面應用），需要引入前端路由系統(tǒng)，這也就是 Vue-Router 存在的意義。
前端路由的核心，就在于：改變視圖的同時不會向后端發(fā)出請求。
為了達到這種目的，瀏覽器當前提供了以下兩種支持：
1.hash——即地址欄 URL 中的 # 符號（此 hash 不是密碼學里的散列運算）。
比如這個 URL：/tupian/20230522/ 的值為 #/hello。
它的特點在于：hash 雖然出現(xiàn)在 URL 中，但不會被包括在 HTTP 請求中，對后端完全沒有影響，因此改變 hash 不會重新加載頁面。
2.history —— 利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。
這兩個方法應用于瀏覽器的歷史記錄棧，在當前已有的 back、forward、go 的基礎之上，它們提供了對歷史記錄進行修改的功能。
只是當它們執(zhí)行修改時，雖然改變了當前的 URL，但瀏覽器不會立即向后端發(fā)送請求。
二、hash模式
hash模式背后的原理是onhashchange事件,可以在window對象上監(jiān)聽這個事件：
window.onhashchange = function(event){
console.log(event.oldURL, event.newURL);
let hash = location.hash.slice(1);
document.body.style.color = hash;
} 網(wǎng)站標題：vue-router的hash和history模式怎么區(qū)分-創(chuàng)新互聯(lián)
網(wǎng)址分享：http://fisionsoft.com.cn/article/gsegh.html
