1、hash模式
hash是一个可以读写的字符串，该字符串是URL的锚部分(从#号开始的后面部分，包含#号)
document.write(location.hash);
- 发送HTTP请求并不包含锚部分，他不会发送给后端，对于服务端没有任何影响
- 改变锚部分并不会触发网页重载
- 改变锚部分，都会在浏览器中的访问历史添加记录，也就是在浏览器的返回、前进可以在URL中重新改变锚部分
- 锚部分是可读可写的
监听锚部分改变的方法有：
//方法一
window.onhashchange=fun
//方法二
<body onhashchange="fun()">
//方法三
window.addEventListener("hashchange",fun,false)
设置URL中的锚部分
locaiton.hash="mao"
他将跳转到name标记的页面部分，同时改变URL添加上锚部分，例如
<p id="mao"></p>
也可以直接通过改变locaiton.href来改变，或者点击链接(购物车)
2、history模式
history路由模式，是因为HTML5在history对象中添加了两个新方法，history.pushState()和history.replaceState(),来在浏览器历史中添加和修改记录，他们都不会触发popstate事件，但是其他go、back、forwrd会。
window.addEventListener('popstate', (event) => {
console.log(`location: ${document.location}, state: ${JSON.stringify(event.state)}`);
});
history.pushState({ page: 1 }, "title 1", "?page=1");
history.pushState({ page: 2 }, "title 2", "?page=2");
history.replaceState({ page: 3 }, "title 3", "?page=3");
history.back(); // Logs "location: http://example.com/example.html?page=1, state: {"page":1}"
history.back(); // Logs "location: http://example.com/example.html, state: null"
history.go(2); // Logs "location: http://example.com/example.html?page=3, state: {"page":3}"
需要注意的是，history模式下，如果跳转路由后再刷新可能会得到404，因为刷新的时候浏览器会将整个地址栏当成一个要访问的URL请求后端，后端并没有这个文件。这时候一般需要配置nginx，告诉访问的路径资源不存在的时候，默认指向静态资源index.html
