hash模式和history模式的区别

表现形式的区别

hash： 带 "# " 参数在 "？" 之后通过 "&" 拼接。

例：https://xxx.com/#/playlist?id=21982373
 

history: 没有 " # " ,参数在路径中。

例：https://xxx.com/playlist/21839210

原理的区别：

hash模式是基于锚点和 onhashchange 事件实现的，将锚点的值作为路由地址，当地址发生变化时触发onhashchange事件，根据路径决定页面上呈现的内容。因为向服务器发送请求不会带#后面的内容，因此修改#后面的内容不会触发浏览器的刷新，不会去请求服务器。

history模式是基于Html5中的 history Api：history.pushState（IE10以上才支持）和history.replaceState方法实现的。

插播：history.push 和 history.pushState方法的区别是，history.pushState方法不会请求服务器，只会改变导航栏的地址并记录历史。

history模式的使用

history模式需要服务端支持，因为在单页应用中，服务端不存在类似于https://xxx.com/login这样的页面，如果我们刷新浏览器，服务器会返回找不到页面。因此，服务端需要配置除了静态资源外都返回单页应用的index.html。（使用vue不需要考虑这个情况，因为vue-cli已经配置好了）

插播：nginx配置解决history模式404的问题。

在nignx配置中加上try_files ，try_files解决的是当 nginx 找不到客户端需要的资源时该怎么办的问题。

html5 history对象的属性和方法

作用：history 接口允许操作浏览器的曾经在标签页或者框架里访问的会话历史记录。window.history: 返回当前会话的 history 状态。

属性
history.length：只读,返回一个整数，该证书表示会话历史中元素的数目，包括当前加载的页。
history.scrollRestoration：允许 web 应用程序在历史导航上显示的设置默认滚动恢复行为。此属性可以是自动的（auto）或者手动的(manual)。这个属性在 vue-router 中设置了 scrollBehavior 属性的时候，会将 history.scrollRestoration 设置为 “manual”。
history.state：只读，表示历史堆栈顶部的状态的值。当通过浏览器存在前进后退的操作时，会触发 popState 事件，且会将该 state 携带回来。

方法
history.back()
在浏览器里是里前往上一页，用户可以点击浏览器左上角的返回。等价于 history.go(-1);当浏览器会话历史记录处于第一页时调用此方法没有效果，而且也不会报错。
history.forward()
在浏览器记录记录里前往下一页，用户可点击浏览器左上角的前进。等价于 history.go(1);
history.go( param )
通过当前页面的相对位置从浏览器历史记录(会话记录)加载页面。
(1) 如果 param 为 0 或者不传，则重新载入当前页面。
(2) 如果 param 为正数，则查找当前页前面的历史记录，并且前进到对应页面。（之所以有正数的情形，其实是因为页面回退过。）
(3) 如果 param 为负数，则查找当前页后面的历史记录，并且后退到对应页面。
history.pushState(state, title, url);
history.pushState()方法向浏览器历史栈添加了一个状态(增加一个记录)。pushState()方法带有三个参数：一个状态对象、一个标题(现在被忽略了)以及一个可选的 URL 地址
(1) state object —— 状态对象是一个由 pushState()方法创建的、与历史纪录相关的 javascript 对象。当用户定向到一个新的状态时，会触发 popstate 事件。事件的 state 属性包含了历史纪录的 state 对象。如果不需要这个对象，此处可以填 null。
(2) title —— 新页面的标题，但是所有浏览器目前都忽略这个值，因此这里可以填 null。

histroy.replaceState(state, title, url);

基本与 pushState 的行为一样，主要区别是 replaceState 会修改当前 history 实体的属性，比如 state。浏览器地址栏会变成你传的地址，而页面并不会重新载入或跳转。

核心重点
1、state

它关系到由pushState()方法创建出来的新的history实体, popstate 的时候会携带返回该 state。

(1) state对象 –state对象是一个JavaScript对象，它关系到由pushState()方法创建出来的新的history实体。用以存储关于你所要插入到历史 记录的条目的相关信息。State对象可以是任何Json字符串。因为firefox会使用用户的硬盘来存取state对象，这个对象的最大存储空间为640k。如果大于这个数 值，则pushState()方法会抛出一个异常。如果确实需要更多的空间来存储，请使用本地存储。

(2) state对象 表示历史堆栈顶部的状态的值。当通过浏览器存在前进后退的操作时，会触发 popState 事件，且会将该 state 携带回来。

2、history.pushState

浏览器不会在调用pushState()方法后就加载url对应的网页.

(1) 浏览器不会在调用pushState()方法后就加载url对应的网页, 但是地址栏地址会变为新的 url。会在进行前进后退，或者刷新浏览器的时候才会加载新的 url 对应的网页。
(2) pushState、replaceState 只能处理的新 url，必须跟现有 url 同域，否则会抛异常。
(3) pushState 会新增一个 histroy 实体。