路由模式： hash模式和history

前端路由实现方式

路由需要实现三个功能：

1. 当浏览器地址变化时， 切换页面。
2. 点击浏览器后退、前进按钮，网页内容跟随变化。
3. 刷新浏览器， 网页加载当前路由对应内容。

在单页面web网页中，单纯的浏览器地址改变，网页不会重载， 如值改变hash网页不会变化， 因此路由主要通过监听事件， 并利用js实现动态改变网页内容， 有两种实现方式：

• hash模式： 监听浏览器地址hash值变化， 执行响应js切换网页。
• history模式： 利用history API实现url地址改变， 网页内容改变。
  他们的区别最明显的就是 hash API会在浏览器后面增加 #号， 而history可以自定义地址。

hash模式

使用window.localtion.hash属性及窗口的onhashchange事件， 可以实现监听浏览器地址hash值变化， 执行相应js切换页面。

1. hash 指的是地址中 #号以及后面的字符， 也成为散列值。hash也称作锚点， 本身是用来做页面跳转定位的。如 http://localhost/index.html#name，这里的#name就是hash；
2. 散列值是不会随请求发送到服务器端的， 所以改变hash不会重新加载页面。
3. 监听 window的hashchange事件，当hash值发生变化时， 可以通过location.hash来获取和设置hash值。
4. 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()方法一样

• 以 https://www.baidu.com为例

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。