hash模式和history模式
hash模式的地址栏中有#,history无
hash有一个锚点的作用,history无(但是如果用hash作为路由则会失去锚点的功能。因为实质是通过锚点的值作为地址。)
hash模式下,切换页面是由hash去寻找对应的模块展示,不会发送请求。触发hashchange()事件。(首屏加载慢,一次加载所有页面。兼容ie8,第一次进入不会触发hashchange()事件。而是load事件)。
在hashchange()中,有event.oldURL和event.newURL来表示新旧地址(锚点)。可以通过id展示对应的页面
history模式下,切换页面会向服务器发送请求,如果服务器没有对应资源或无响应则会显示404。
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,除非主动发起请求;