hash模式
即地址栏URL中带有
hash模式背后的原理是 onhashchange 事件,能够在window对象上监听这个事件,
不过只能改变
监听hash模式路由变化方法
window.onhashchange = function(event){
console.log(event.oldURL, event.newURL);
}
history模式
history模式是利用了HTML5中 pushState() 和 replaceState() 这两个API实现的。
**History对象-属性**
History.length：当前窗口访问过的网址数量
History.state： History 堆栈最上层的状态值
**History对象-方法**
History.back()
History.forward()
History.go()
History.pushState()
pushState() 方法不会触发页面刷新，只是导致 History 对象发生变化，地址栏会有反应。
History.replaceState()
History.pushState()方法用于在历史记录栈中添加一条记录。
用法：window.history.pushState(state, title, url)
1. state：一个与添加的记录相关联的状态对象，主要用于popstate事件。该事件触发时，该对象会传入回调函数。
也就是说，浏览器会将这个对象序列化以后保留在本地，重新载入这个页面的时候，可以拿到这个对象。
如果不需要这个对象，此处可以填null。
2. title：新页面的标题。但是，现在所有浏览器都忽视这个参数，所以这里可以填空字符串。
3. url：新的网址，**必须与当前页面处在同一个域**。浏览器的地址栏将显示这个网址。
例子：
var stateObj = { name: 'zhangsan' };
history.pushState(stateObj, '', 'name2.html');
添加新记录后，浏览器地址栏立刻显示 xxx.com/name2.html
但并不会跳转到name2.html，也不会检查name2.html是否存在，它只是成为浏览历史中的最新记录。
此时，在地址栏输入一个新的地址baidu.com，然后点击了倒退按钮，页面的 URL 将显示name2.html；
你再点击一次倒退按钮，URL 将显示name1.html。
History.replaceState()方法用来修改 History 对象的当前记录，其他都与pushState()方法一模一样。
监听history模式历史记录的变化使用popstate
hashchange和popstate事件触发条件
1、hashchange
当URL的片段标识符更改时，将触发hashchange事件 (跟在＃符号后面的URL部分，包括＃符号)。
2、popstate
每当处于激活状态的 历史记录条目 发生变化时,popstate事件就会在对应window对象上触发。
如果当前处于激活状态的历史记录条目是由history.pushState()方法创建,或者由history.replaceState()方法修改过的,
则popstate事件对象的state属性包含了这个历史记录条目的state对象的一个拷贝。
**注意**
1.调用history.pushState()或history.replaceState()不会触发popstate事件。
2.popstate事件只会在浏览器某些行为下触发, 比如点击后退、前进按钮
(或者在JavaScript中调用`history.back()、history.forward()、history.go()`方法).
3.该事件只针对同一个文档，如果浏览历史的切换，导致加载不同的文档，该事件也不会触发
3-1.先访问www.baidu.com===>这时加载的是百度的首页文档
3-2.在访问www.taobao.com===>这时加载的是淘宝的的首页文档
3-3.点击浏览器的返回按钮从www.taobao.com到www.baidu.com就不会触发onpopstate事件
禁止返回上一页方案
mounted() {
history.pushState(null, null, document.URL);
window.addEventListener("popstate",function(e) {
console.log(e);
history.pushState(null, null, document.URL);
}, false);
}
这个其实就是利用pushState向浏览历史列表中插入当前页面，
在点击后退前和点击时都插入一次，那样无论点前进还是后退永远都会留在这个页面了
