hash模式
1瓶盛、帶#號(hào)
http://10.46.134.159:8080/#/about
2、能監(jiān)聽hash變化的事件熊赖，onhashchange
在hash模式下澎嚣，通過router-link的to屬性和this.$router.push均不會(huì)觸發(fā)onhashchange事件
與之對應(yīng)的replace也不會(huì)觸發(fā)
執(zhí)行window.history.back()
window.history.forward()
window.history.go(1)會(huì)觸發(fā)
點(diǎn)擊瀏覽器左上角的前進(jìn)后退可以觸發(fā)onhashchange
window.addEventListener(
'hashchange',
function (event) {
const oldURL = event.oldURL; // 上一個(gè)URL
const newURL = event.newURL; // 當(dāng)前的URL
console.log(newURL, oldURL);
},
false
);
注意：監(jiān)聽方法的調(diào)用，要在mounted中淋淀，不能在created中
3遥昧、兼容性 ie8
4、頁面隨便刷新
history模式
1、網(wǎng)址正常
http://10.46.134.159:8080/about
2炭臭、能監(jiān)聽history變化的事件永脓，onpopstate
在history模式下，
通過router-link的to屬性和this.$router.push均不會(huì)觸發(fā)onpopstate事件
調(diào)用window.history.pushState 和 window.history.replaceState 不會(huì)觸發(fā) onpopstate 事件
與之對應(yīng)的replace也不會(huì)觸發(fā)
執(zhí)行window.history.back()
window.history.forward()
window.history.go(1)會(huì)觸發(fā) 0是刷新 可傳-1
點(diǎn)擊瀏覽器左上角的前進(jìn)后退可以觸發(fā)onpopstate
a 標(biāo)簽的錨點(diǎn)也會(huì)觸發(fā)該事件
window.addEventListener("popstate", function() {
var currentState = history.state;
console.log('history',history)
});
2個(gè)api能控制歷史記錄棧
(1) window.history.pushState(state, title, url);在瀏覽器中新增一條歷史記錄鞋仍。state是對象常摧，會(huì)在onpopstate事件觸發(fā)時(shí)作為參數(shù)傳遞過去，title為頁面標(biāo)題威创，url為頁面地址落午；
瀏覽器在調(diào)用pushState()方法后不會(huì)去加載這個(gè)URL，新的URL不一定要是絕對地址肚豺，如果它是相對的板甘，它一定是相對于當(dāng)前的URL。
url不能跨域详炬，否則報(bào)錯(cuò)
(2) window.history.replaceState(state, title, url);在瀏覽器中替換當(dāng)前歷史記錄
上述2個(gè)api使用場景盐类，控制安卓系統(tǒng)的回退按鈕的跳轉(zhuǎn)
history的其他api
history.length()：當(dāng)前歷史列表中的歷史記錄條數(shù)；
需要注意：
谷歌瀏覽器和火狐瀏覽器在頁面第一次打開的反應(yīng)是不同的呛谜，谷歌瀏覽器奇怪的是會(huì)觸發(fā) onpopstate 事件在跳，而火狐瀏覽器則不會(huì)
解決：先加入一條記錄，在定時(shí)器中加onpopstate 的監(jiān)聽
組件釋放的時(shí)候要記得去掉監(jiān)聽
3隐岛、兼容性 ie10
專業(yè)網(wǎng)址：
https://developer.mozilla.org/en-US/docs/Web/API/History
onpopstate猫妙、pushState、replaceState都是兼容到ie10
pushState 和 replaceState 兩個(gè)方法跟 location.href 和 location.replace 兩個(gè)方法有什么區(qū)別呢聚凹？應(yīng)用的場景有哪些呢割坠？
location.href 和 location.replace 切換時(shí)要向服務(wù)器發(fā)送請求，而 pushState 和 replace 僅修改 url
window.location.replace="http://10.46.134.159:8080/about";
location.replace("http://10.46.134.159:8080/about")
window.location.replace會(huì)增加一條history歷史記錄
另外有history封裝的js
https://cdn.bootcss.com/history/4.7.2/history.js
===至于 history刷新404 不懂===
