vue-router路由的两种模式

类型: string
默认值:“hash” (浏览器环境) | “abstract” (Node.js 环境)
可选值: “hash” | “history” | “abstract”
配置路由模式: hash : 使用 URL hash 值来作路由。支持所有浏览器，包括不支持 HTML5 History Api 的浏览器。

history : 依赖 HTML5 History API 和服务器配置。查看 HTML5 History 模式。
abstract : 支持所有 JavaScript 运行环境，如 Node.js 服务器端。如果发现没有浏览器的 API，
路由会自动强制进入这个模式

hash模式:
url 的 hash 是以 # 开头，原本是用来作为锚点，从而定位到页面的特定区域。当 hash 改变时，页面不
会因此刷新，浏览器也不会向服务器发送请求。
http://www.xxx.com/#/home
同时， hash 改变时，并会触发相应的 hashchange 事件。所以，hash 很适合被用来做前端路由。当
hash 路由发生了跳转，便会触发 hashchange 回调，回调里可以实现页面更新的操作，从而达到跳转
页面的效果。
hash模式的工作原理是hashchange事件，可以在window监听hash的变化。我们在url后面随便添加一
个#xx触发这个事件

window.onhashchange = function(event){
 		console.log(event);
  }

可以看到里边有两个属性newURL和oldURL。可以通过模拟改变hsh的值，动态页面数据。

<div id="test" style="height: 500px;width: 500px;margin: 0 auto"></div> 
<script> 
window.onhashchange = function(event){ 
   let hash = location.hash.slice(1);
   document.body.style.color = hash;
  document.getElementById('test').style.backgroundColor = hash 
  } 
  </script>

尽管浏览器没有请求服务器，但是页面状态和url已经关联起来了，这就是所谓的前端路由，单页应用的
标配。

---

history模式：
HTML5 规范中提供了 history.pushState 和 history.replaceState 来进行路由控制。通过这两个方法，
可以实现改变 url 且不向服务器发送请求。同时不会像 hash 有一个 # ，更加的美观。但是 History 路由
需要服务器的支持，并且需将所有的路由重定向到根页面。
History 路由的改变不会去触发某个事件，所以我们需要去考虑如何触发路由更新后的回调。
有以下两种方式会改变 url：

调用 history.pushState 或 history.replaceState；
点击浏览器的前进与后退。

第一个方式可以封装一个方法，在调用 pushState（replaceState）后再调用回调

function push (url) {
 	window.history.pushState({}, null, url); handleHref(); 
 }
 function handleHref () { 
 	console.log('render'); 
 }

第二个方式，浏览器的前进与后退会触发 popstate 事件。

window.addEventListener('popstate', handleHref);

前进，后退，跳转操作方法：

history.go(-3);//后退3次 
history.go(2);//前进2次 
history.go(0);//刷新当前页面 
history.back(); //后退
 history.forward(); //前进