前端路由分为两种模式一种是hash模式，一种是history模式,具体如下：
hash
形式
//localhost/index.html#abc
就是跟在url后面的#string
这个string值一旦更改就会触发onhashchange事件，但并不会导致客户端向服务器发发送请求
机制
利用window.location.hash可以查看/修改hash地址，
利用事件onhashchange，可以监听hash的改变
要点
- hash指的是地址中#号以及后面的字符，也称为散列值。hash也称作锚点，本身是用来做页面跳转定位的。如
- http://localhost/index.html#abc，这里的#abc就是hash；
- 散列值是不会随请求发送到服务器端的，所以改变hash，不会重新加载页面；
- 监听 window 的 hashchange 事件，当散列值改变时，可以通过 location.hash 来获取和设置hash值；
- location.hash值的变化会直接反应到浏览器地址栏；
实际使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
</style>
<body>
<div>
<a href="#page1">go1</a>
<a href="#page2">go2</a>
<div id="nav">自定义导航go3</div>
<p id="path"></p>
</div>
</body>
<script>
document.querySelector('#nav').addEventListener('click',function(){
//还可以在这里做别的逻辑操作
window.location.hash='go3'
})
window.addEventListener('hashchange', function(route){
console.log('route更新',route);
document.getElementById('path').innerHTML='当前地址'+route.newURL
})
</script>
</html>
history
window.history 属性指向 History 对象，它表示当前窗口的浏览历史。当发生改变时，只会改变页面的路径，不会刷新页面。
浏览器工具栏的“前进”和“后退”按钮，其实就是对 History 对象进行操作。
api相关:
History.length:访问过的网址数量
History.state：堆栈顶的状态值
History.back History.forword 向后向前 History.go 向任意位置 这三者会触发页面更新
history.pushState(object, title, url) 增加记录但不触发页面刷新
-
object：是一个对象，通过 pushState 方法可以将该对象内容传递到新页面中。如果不需要这个对象，此处可以填 null。
-
title：指标题，几乎没有浏览器支持该参数，传一个空字符串比较安全。
-
url：新的网址，必须与当前页面处在同一个域。不指定的话则为当前的路径，如果设置了一个跨域网址，则会报错。
var data = { foo: 'bar' }; history.pushState(data, '', '2.html'); console.log(history.state) // {foo: "bar"}
History.replaceState 修改当前记录，其他同上
Even'popstate' 堆栈弹出时触发