一、history
window.history(可直接写成history)指向History对象，它示意当前窗口的阅读汗青。
History对象保留了当前窗口接见过的一切页面网址
1. length
history.length属性保留着汗青纪录的url数目，初始时该值为1，假如当前窗口前后接见了三个网址，那末history对象就包含3项，history.length=3
2.跳转要领：许可在阅读器汗青之间挪动
go() 接收一个整数为参数，挪动到该整数指定的页面，比方history.go(1)相当于history.forward(),history.go(-1)相当于history.back(),history.go(0)相当于革新当前页面
back() 挪动到上一个接见页面，等同于阅读器的退却键,罕见的返回上一页就能够用back()，是从阅读器缓存中加载，而不是从新要求服务器发送新的网页
forward() 挪动到下一个接见页面，等同于阅读器的行进键
假如挪动的位置超出了接见汗青的边境，以上三个要领并不报错，而是默默的失利
3.history.pushState()
在阅读器汗青中增加纪录
if(!!(window.hostory && history.pushState)) {
// 支撑History API
} else {
// 不支撑
}
以上代码能够用来搜检当前阅读器是不是支撑History API。假如不支撑的话能够斟酌运用Polyfill库History.js
history.pushstate()要领接收三个参数，以此为：
state: 一个与指定网址相干的状况对象，popState事宜触发时，该对象会传入回调函数，假如不须要这个对象，此处可填null
title: 新页面的题目，然则一切阅读器现在都疏忽这个值，因而这里能够填null
url: 新的网址，必需与当前页面处在同一个域，阅读器的地点栏将显现这个网址
假定当前网址是example.com/1.html，我们运用pushState要领在阅读纪录(history对象)中增加一个纪录
var stateObj = {foo:'bar'};
history.pushState(stateObj,'page 2','2.html')增加上边这个新纪录后，阅读器地点栏马上显现example.com/2.html，但不会跳转到2.html，以至也不会搜检2.html是不是存在，它只是成为阅读汗青中的新纪录。这时刻，你在地点栏输入一个新的地点，然后点击了退却按钮，页面的url将显现2.html；你再点击以此退却按钮，url将显现1.html
总之，pushState要领不会触发页面革新，只是致使了history对象发生变化，地点栏会有回响反映。
假如pushState的url参数，设置了一个新的锚点值（即hash），并不会触发hashChange事宜，假如设置了一个跨域网址，则会报错。
//报错
history.pushState(null,null,'https://twitter.com/hello')
上边代码中，pushState()想要插进去一个跨域的网址，致使报错，如许设想的目标是防备恶意代码让用户认为他们是在另一个网站上
4. history.replaceState()
history.replaceState()要领的参数和pushState()要领一摸一样，区分是它修正阅读器汗青当中的纪录
假定当前页面是example.com/example.html
history.pushState({page:1},'title 1','?page=1')
history.pushState({page:2},'title 2','?page=2')
history.replaceState({page:3},'title 3','?page=3')
history.back() //url显现为example.com/example.html?page=1
history.back() //url显现为example.com/example.html
history.go(2) //url显现为example.com/example.html?page=3
5. history.state属性
history.state返回当前页面的state对象
history.pushState({page:1},'title 1','?page=1')
history.state //{page:1}
5. popState 事宜
每当同一个文档的阅读汗青（即history）涌现变化时，就会触发popState事宜
须要注重：仅仅挪用pushState要领或replaceState要领，并不会触发该事宜，只要用户点击阅读器退却和行进按钮时，或许运用js挪用back、forward、go要领时才会触发。别的该事宜只针对同一个文档，假如阅读汗青的切换，致使加载差别的文档，该事宜不会被触发
运用的时刻，能够为popState事宜指定回调函数
window.onpopstate = function (event) {
console.log('location: ' + document.location);
console.log('state: ' +JSON.stringify(event.state));
};
// 或许
window.addEventListener('popstate', function(event) {
console.log('location: ' + document.location);
console.log('state: ' + JSON.stringify(event.state));
});
回调函数的参数是一个event事宜对象，它的state属性指向pushState和replaceState要领为当前url所供应的状况对象（即这两个要领的第一个参数）。上边代码中的event.state就是经由过程pushState和replaceState要领为当前url绑定的state对象
这个state也能够直接经由过程history对象读取
history.state
注重：页面第一次加载的时刻，阅读器不会触发popState事宜
6.history.scrollRestoration
history.scrollRestoration = ‘manual’;封闭阅读器自动转动行动
history.scrollRestoration = ‘auto’;翻开阅读器自动转动行动(默许)
二、hash
hash 就是指 url 尾巴后的 # 号以及背面的字符。这里的 # 和 css 里的 # 是一个意义。hash 也 称作 锚点，本身是用来做页面定位的，她能够使对应 id 的元素显现在可视区域内。
经由过程window.location.hash猎取hash值
延长：
window.location对象内里
hash ： 设置或返回从 (#) 最先的 URL（锚）。
host ： 设置或返回主机名和当前 URL 的端口号。
hostname：设置或返回当前 URL 的主机名。
href ： 设置或返回完整的 URL。
pathname： 设置或返回当前 URL 的途径部份。
port：设置或返回当前 URL 的端口号。
search ： 设置或返回从问号 (?) 最先的 URL（查询部份）。
assign() ： 加载新的文档。
reload() ： 从新加载当前文档。
replace() ： 用新的文档替代当前文档。hash主如果一个事宜：hashchange,当hash值转变时会触发这个事宜
语法：window.onhashchange = fun
或许：<body onhashchange=”fun”>
以上事宜将掩盖现有的事宜处置惩罚顺序，为了增加一个新的事宜处置惩罚顺序，而不掩盖已有的其他的事宜处置惩罚顺序，能够运用函数”addEventListener”
window.addEventListener('hashchange',fun,false)
例子：
if('onhashchange' in window) {
alert("该阅读器支撑 hashchange 事宜!");
}
function locationHashChanged() {
if (location.hash === "#somecoolfeature") {
somecoolfeature();
}
}
window.onhashchange = locationHashChanged;
hashchange事宜有两个属性：
newURL: string范例，当前页面新的url
oldURL: string范例，当前页面旧的url
window.addEventListener('hashchange', function (e) {
console.log(e.newURL,e.oldURL)
var str = e.newURL.split('#')[1]
document.getElementById('num').innerHTML = str.split('=')[1]
})
三、vue-router中history和hash两种形式的区分
在vue的路由设置中有mode选项 最直观的区分就是在url中hash带了一个很丑的#，而history是没有#的
mode:"hash",
mode:"history"hash和history形式的差别👇
关于vue这类渐进式的前端开辟框架，为了构建spa单页面运用，须要引入前端路由体系，也就是vue-router存在的意义。前端路由的中心就在于—转变视图的同时不会向后端发出要求。
为了到达这一目标，阅读器供应了以下两种支撑：
- hash—–即地点栏url中的#标记，比方：http://www.baidu.com/#/a,hash…。它的特征在于#/a虽然在url中，但不会被包含在http要求中，对后端完整没有影响，因而转变hash不会从新加载页面。
- history—–利用了html5 History Interface中新增的pushState()和replaceState()要领。这两个要领运用于阅读器的汗青纪录栈，在当前已有的back、forward、go的基本之上，它们供应了对汗青纪录举行修正的功用。只是当它们实行修正时，虽然转变了当前的url，但阅读器不会马上向后端发送要求。
- 因而能够说，hash形式和history形式都属于阅读器本身的特征，vue-router只是利用了这两个特征（经由过程阅读器供应的接口）来完成前端路由。
运用场景：
平常场景下，hash和history都能够，除非你更在乎颜值，#标记夹杂在url里看起来确切不太优美。
假如不想要很丑的hash，我们能够用路由的history形式，这类形式充分利用history.pushState API来完成url跳转而无需从新加载页面。
别的，挪用history.pushState()比拟于直接修正hash，存在以下上风：
- pushState()设置的新的url能够是于当前url同源的恣意url，而hash只可修正#背面的部份，因而只能设置与当亲url同文档的url
- pushState()设置的新的url能够与当前url一摸一样，如许也会把纪录增加到栈中；而hash设置的新值必需与本来的不一样才会触发行动将纪录增加到栈中
- pushState()经由过程stateObject参数能够增加恣意范例的数据到纪录中；而hash只可增加短字符串
- pushState()可分外设置title属性供应后续运用
固然啦，history也不是样样都好，spa虽然在阅读器里游刃有余，但真要经由过程url向后端提议要求时，差别就来了，尤其在用户手动输入url后回车，或许革新（重启）阅读器的时刻，会报一个404的毛病，找不到指定路由，须要后端去指向准确的路由婚配, 比方当url不婚配时跳转到index.html.
假如Vue背景布置运用的是Nginx, 能够如许设置
location / {
try_files $uri $uri/ /index.html;#支撑history形式革新
root /www/test/hello/;
index index.html;
}