前端路由实现方式
路由需要实现三个功能：
- 当浏览器地址变化时， 切换页面。
- 点击浏览器后退、前进按钮，网页内容跟随变化。
- 刷新浏览器， 网页加载当前路由对应内容。
在单页面web网页中，单纯的浏览器地址改变，网页不会重载， 如值改变hash网页不会变化， 因此路由主要通过监听事件， 并利用js实现动态改变网页内容， 有两种实现方式：
- hash模式： 监听浏览器地址hash值变化， 执行响应js切换网页。
- history模式： 利用history API实现url地址改变， 网页内容改变。
他们的区别最明显的就是 hash API会在浏览器后面增加#号， 而history可以自定义地址。
hash模式
使用window.localtion.hash属性及窗口的onhashchange事件， 可以实现监听浏览器地址hash值变化， 执行相应js切换页面。
- hash 指的是地址中 #号以及后面的字符， 也成为散列值。hash也称作锚点， 本身是用来做页面跳转定位的。如 http://localhost/index.html#name，这里的#name就是hash；
- 散列值是不会随请求发送到服务器端的， 所以改变hash不会重新加载页面。
- 监听 window的
hashchange事件，当hash值发生变化时， 可以通过location.hash来获取和设置hash值。 - location.hash值的变化会直接反应到浏览器地址栏。
触发hashchange事件的几种情况：
- 浏览器地址栏hash的变化包括浏览器的前进、后退，会触发window.location.hash值的变化， 从而触发onhashchange事件。
- 当访问http://localhost/index.html#name只会向服务器发送 http://localhost/index.html，请求完毕之后设置hash为#name, 并触发onhashchange事件。
- 当只改变地址栏url 的hash部分， 按下回车， 浏览器不会发送任何请求至服务器， 这是只改动了hash值并触发onhashchange事件。
- html中a标签通过ID定位锚点， 同时urL会自动设置hash，并触发onhashchange事件。
//改变hash
window.location.hash = 'name';
//监听hashchange
window.addEventListener('hashchange', function (e) {
console.log(e);
});
history模式
History对象主要有两个属性。
- History.length （当前窗口访问过的网址数量，包括当前网页）
- History.state (History堆栈最上层的状态值)
history.length;
history.state;
方法
-
History,back():移动到上一个网址，等同于点击浏览器后退键。对于第一个访问的网址，该方法无效。 -
History.forward(): 移动到下一个网站， 等同于浏览器的后退键。 对于最后一个访问的网址，该方法无效。
History.go(): 接受一个整数作为参数， 以当前网址为基准， 默认参数为0， 相当于刷新页面。
history.back();
history.forward();
history.go(1); // 相当于history.forward();
histroy.go(-1); //相当于history.back();
history.go(0); //刷新当前页
注意： 移动到以前访问过的页面时， 页面通常是从浏览器缓中加载， 而不是重新要求服务器发送新的网页。
History.pushState()
该方法用于在历史中添加一条记录。 pushState()方法不会触发页面刷新， 只是导致History对象发生变化， 地址栏会有变化。
语法： history.push(object, title, url);
-
object: 通过pushState方法可以将该对象传递到新的页面中。 不需要可以填null。 -
title: 标题， string，目前几乎没有浏览器支持该参数，，可以填空字符串。 -
url: 新的网址， 必须与当前页面处在同一个域。 如果是跨域网址则会报错（这么设计是为了防止恶意代码让用户以为他们是在另一个网站上）。
var data = {name: 'data'};
history.pushState(data,' ','/open');
console.log(history.state);// {name: 'data'}
注意： 如果pushState的url参数设置了一个新的hash， 并不会触发hashchange事件。反过来， 如果url的hash变动了，则会在History对象创建一条浏览记录。
HIstory.replaceState()
该方法用来修改History对象的当前记录， 用法与pushState()方法一样
history.pushState({a: 1}, ' ', '?a=1');
//url为 https://www.baidu.com?a=1
history.pushState({a: 2}, ' ', '?a=2');
//url为 https://www.baidu.com?a=2
history.pushState({a: 3}, ' ', '?a=3');
//url为 https://www.baidu.com?a=3
history.back();
//url为 https://www.baidu.com?a=1
history.back();
//url为 https://www.baidu.com
history.go(2);
//url为 https://www.baidu.com?a=3
popstate事件
每当history度歘爱能出现变化时， 就会触发popstate事件。
- 仅仅调用
pushState()或replaceState()方法， 并不会触发popstate事件。 - 只有点击浏览器前进倒退按钮，或者使用js调用
history,back(),history.forward(),history.go()方法时才会触发。 - popstate事件只针对同一个文档， 如果浏览历史的切换， 导致加载不同的文档， 该事件也不会触发。
- 页面第一次加载的时候， 浏览器不会触发
popstate事件。
window.addEventListener('popstate',function(e) {
var s1 = e.state;
var s2 = history.state;
// s1 == s2
});
history致命的缺点是当改变页面地址后，强制刷新浏览器时， 如果后端没有对应的地址，会404，因为刷新是拿当前地址去请求服务器， 如果服务器没有相应的响应，页面则会404。
