URL的hash和HTML5的histpry

如何改变url,但是不刷新页面?

一. url的hash

  • URL的hash也就是锚点(#), 本质上是改变window.location.href属性.
  • 直接赋值location.hash来改变href, 但是页面不发生刷新

前端路由会监控hash的改变,当hash改变的时候,匹配对应的页面

URL的hash和HTML5的histpry二.HTML5的history

history接口是HTML5新增的, 它有五种模式改变URL而不刷新页面

1.history.pushState()

pushState()可以改变url页面不刷新,同时将当前url入栈

URL的hash和HTML5的histpry

 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,不做记录,不能后退

URL的hash和HTML5的histpry

 3.history.go()

  • history.back() 等价于 history.go(-1)
  • history.forward() 则等价于 history.go(1)
  • 这三个接口等同于浏览器界面的前进后退。

URL的hash和HTML5的histpry

 

上一篇:【Remi】配置Remi镜像源


下一篇:部署java环境