hash模式和history模式

hash模式的地址栏中有#，history无

hash有一个锚点的作用，history无（但是如果用hash作为路由则会失去锚点的功能。因为实质是通过锚点的值作为地址。）

hash模式下，切换页面是由hash去寻找对应的模块展示，不会发送请求。触发hashchange（）事件。（首屏加载慢，一次加载所有页面。兼容ie8，第一次进入不会触发hashchange()事件。而是load事件）。

在hashchange（）中，有event.oldURL和event.newURL来表示新旧地址（锚点）。可以通过id展示对应的页面

history模式下。有以下几个方法

　　back（）

　　go(number)

　　forword()

这三个方法属于对于路由历史记录的进退，

　　pushState() IE10以后才支持 （有兼容性问题）

　　replaceState()

这两个方法则涉及到页面的跳转。以上五个方法不发送请求，仅修改url。与hash模式相比，如果服务器没有同步更新新的路由history模式会显示404（如果不想碰到这种情况可以在服务端做处理来使其跳转至其他页面），而hash模式则会找到对应的锚点展示对应页面。

此处对history路由的监听有一个popstate（）方法，但是pushState和replaceState被调用时，是不会触发触发 popstate 事件，对于这种情况可以使用window.dispatchevent（）来添加事件。

const listener = function (type) {
    var orig = history[type];
    return function () {
        var rv = orig.apply(this, arguments);
        var e = new Event(type);
        e.arguments = arguments;
        window.dispatchEvent(e);
        return rv;
    };
};
window.history.pushState = listener('pushState');
window.history.replaceState = listener('replaceState');

在添加之后就可以通过window.addEventLister（）来监听对应事件了。

hash模式的传参是基于url的，如果要传递复杂的数据会有体积的限制，而history模式不仅可以在url里放参数，还可以将数据存放在一个特定的对象中。

 

关于浏览器的跳转还有location.href和location.replace两个方法，这两个方法需要在调用的时候向服务器发送请求，而 pushState 和 replace 仅修改 url，除非主动发起请求；

 

标签：hash,模式,window,锚点,pushState,history
来源： https://www.cnblogs.com/wanghuanl/p/16170226.html