history和hash详解

一、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;
}

history和hash详解

小鱼儿

引用和评论

vue和react项目中key的作用

100个React最佳实践小技巧

前端如何入门 Go 语言

前端开发工具

开发插件集合

JS校验身份证号

Jerry和您聊聊Chrome开发者工具