如何改变url,但是不刷新页面?
一. url的hash
- URL的hash也就是锚点(#), 本质上是改变window.location.href属性.
- 直接赋值location.hash来改变href, 但是页面不发生刷新
前端路由会监控hash的改变,当hash改变的时候,匹配对应的页面
二.HTML5的history
history接口是HTML5新增的, 它有五种模式改变URL而不刷新页面
1.history.pushState()
pushState()可以改变url页面不刷新,同时将当前url入栈
history.pushState({},'','a')
history.pushState({},'','b')
history.pushState({},'','c')
url依次改变为a,b,c,对a,b,c分别进行入栈操作(先进后出)
当执行history.back()或者点击浏览器上的后退按钮,栈顶元素c被移除,url变为b
2.history.replaceState()
替换原来的url,不做记录,不能后退
3.history.go()
- history.back() 等价于 history.go(-1)
- history.forward() 则等价于 history.go(1)
- 这三个接口等同于浏览器界面的前进后退。