vue路由的两种模式--hash和history

  大家都知道在vueRouter中，我们可以通过mode来改变路由模式，可选为hash和history。

hash

  hash指的是location里面#以及它后面的部分。也被成为锚点，通常用来定位，它的改变不会造成页面的刷新。
  我们可以通过window.location.hash来获取当前的hash值。

** 拓展：url各部分获取 **
hash	设置或返回从井号 (#) 开始的 URL（锚）。
host	设置或返回主机名和当前 URL 的端口号。
hostname	设置或返回当前 URL 的主机名。
href	设置或返回完整的 URL。
pathname	设置或返回当前 URL 的路径部分。
port	设置或返回当前 URL 的端口号。
protocol	设置或返回当前 URL 的协议。
search	设置或返回从问号 (?) 开始的 URL（查询部分）。

  hash模式主要原理是浏览器自带的一个hashchange事件。

** hashchange事件包含newURL和oldURL,分别为旧的和新的URL **
window.addEventListener('hashchange',(e) => {
	console.log('旧url: ',e.newURL)
	console.log('新url: ', e.oldURL)
},false)

** 可以通过下述代码判断是否支持该事件 **
if('onhashchange' in window) {
   alert("该浏览器支持 hashchange 事件!");
}

history

  history模式是通过调用window.history对象上的一系列方法来实现页面的无刷新跳转。
  history对象的一些方法：

go()  接受一个整数为参数，移动到该整数指定的页面，比如history.go(1)相当于history.forward(),history.go(-1)相当于history.back(),history.go(0)相当于刷新当前页面
back()  移动到上一个访问页面，等同于浏览器的后退键,常见的返回上一页就可以用back()，是从浏览器缓存中加载，而不是重新要求服务器发送新的网页
forward()  移动到下一个访问页面，等同于浏览器的前进键

** pushState() ** 向浏览器历史中添加记录
history.pushstate()方法接受三个参数：
state: 一个与指定网址相关的状态对象，popState事件触发时，该对象会传入回调函数，如果不需要这个对象，此处可填null
title: 新页面的标题，但是所有浏览器目前都忽略这个值，因此这里可以填null
url: 新的网址，必须与当前页面处在同一个域，浏览器的地址栏将显示这个网址
** replaceState() ** 修改浏览器历史中的记录, 方法和pushState()一致


//pushState方法不会触发页面刷新，只是导致了history对象发生变化，地址栏会有反应。

  跟hash模式改变会触发hashchange事件一样，当history发生改变时会触发popState事件。（仅仅调用pushState和replaceState方法时，并不会触发该事件； 页面第一次加载时也不会触发该事件。）

window.addEventListener('popstate', function(event) {
  console.log('location: ' + document.location);
  console.log('state: ' + JSON.stringify(event.state));
});

hash和history的特点

hash
1、hash只是URL中的一个锚点，它的改变不会触发页面的重新加载，只是浏览器滚动到DOM的相应的位置，即不包含在http请求中，对后端没有任何影响。
2、hash的改变都会在浏览器历史中增加一条记录，可以点击浏览器的返回、前进回到相应界面。
3、只能修改URL中#后面的部分，所以只能跳转到与当前URL同文档的URL。

history
1、新的URL可以是与当前URL同源的任意 URL，也可以与当前URL一样，但是这样会把重复的一次操作记录到栈中
2、通过参数stateObject可以添加任意类型的数据到记录中
3、可额外设置title属性供后续使用
4、URL地址会改变，但是同样的不会刷新界面