hash模式
这里的hash就是指url尾巴后的#号以及后面的字符。这里的#和css里的#是一个意思。hash也称作锚点,本身是用来做页面定位的,他可以使对应的id元素显示在可视区域内。
hash值变化不会导致浏览器向服务器发出请求,而且hash改变会触发hashchange事件,浏览器的进后退也能对其进行控制,
特点:hash虽然出现url中,但不会被包含在HTTP请求中,对后端完全没有影响,因此改变hash不会重新加载页面。hash 本来是拿来做页面定位的,如果拿来做路由的话,原来的锚点功能就不能用了。其次,hash的而传参是基于url的,如果要传递复杂的数据,会有体积的限制
history模式
history模式不仅可以在url里放参数,还可以将数据存放在一个特定的对象中。
history———利用了HTML5 History Interface 中新增的pushState()和replaceState()方法。(需要特定浏览器的支持)history不能运用与IE8一下,这两个方法应用于浏览器的历史纪录站,在当前已有的back、forward、go 的基础之上,他们提供了对历史纪录进行修改的功能,只是当他们执行修改时,虽然改变了当前的url,但你的浏览器不会立即像后端发送请求。
区别
- hash利用锚点功能实现路由,history利用back、forward、go、pushState、replaceState实现路由。
- hash的参数需要带在url后面,会有体积限制,而history既可以放在url后面,也可以放到特定对象中。
- hash的哈希值是不包含在http请求中的,所以即使出现不存在的路由,也不会包含在http请求中,所以不会使得后台返回404,而history是会把完整的路由包含到http请求中,会出现后端返回404的情况(刷新)。
我的理解
hash路由的缺点:会占用锚点功能以及参数会带在url后面,锚点功能可以使用element.scrollToView来解决,而参数问题,虽然history有特定对象可以拥有更大的体积参数,但是这个特定对象是存在与内存中的,一刷新就没有了,这对于一些一进入页面就要使用到的参数来说会出现意料之外的情况,而且history路由刷新还会可能导致404。而对于较大体积的参数可以使用localstorage等缓存来解决。最后,history使用到了HTML5新特性pushState和replaceState,不支持ie8以下浏览器,而hash就没这种烦恼。
总结:想要完美的功能以及兼容性选择hash路由,但相对要解决的问题比较多,如果嫌麻烦或者不喜欢url太长的则可以选择history路由