url的hash和html5的history模式——改变页面url不刷新页面

BOM包括五个对象，window、navigation、screen、location、history，其中location和history都是跟页面路由相关的，且它们都是window 对象的一部分，可通过 window.history 属性对其进行访问。

1. hash

通过hash改变页面url，方法是location.hash = 'xxx'

• 先清空network内的请求

  
  

• 在控制台输入location.hash = 'aaa'

  
  

• 观察到浏览器没有请求新数据，页面也没有刷新

  
  

2. history模式

history模式本质上是用一种类似于栈结构的方式来存取路由，通过history.pushState(data,title,url)可以更改页面url

• 在控制台输入history.pushState({},'','bbb')，页面路由由aaa变成了bbb，同样浏览器没有请求新数据，页面也没有刷新

  
  
• 再次压入两个url：bbb和ccc，此时栈顶的url是ccc，然后使用history.back()方法移除ccc，就相当于返回上一个页面了
  
  
  注意，back要加()不然会返回一个function

3. history的其他方法

• history.replaceState(data,title,url)：顾名思义，替换当前页面，无法返回和前进，有点类似于重定向
  -history.forward()：与history.back()相反，这个是前进到下一个页面
• history.go(delta)：这个是back和forward的集成版，通过delta控制页面的变化，hisroty.go(-1) = history.back()，hisroty.go(1) = history.forward()，hisroty.go(-2) = history.back()之后再history.back()
  注意history不支持链式调用，因为各个方法的返回值都是undefined，比如history.back().back()会报错Cannot read property 'back' of undefined