前端history路由和hash路由
0 条评论前端history路由和hash路由
hash 路由
事件hashchange只会在 hash 发生变化时才能触发,而第一次进入到页面时并不会触发这个事件,因此第一次进入到页面时我们还需要监听load事件。
当页面中的 hash 发生变化时,会触发hashchange事件,因此我们可以监听这个事件,来判断路由是否发生了变化,然后渲染不同的内容,这种路由不向服务器发送请求,不需要服务端
hashchange 事件对象有下面两个属性:
属性 | 类型 | 描述 |
---|---|---|
newURL | DOMString | 当前页面新的URL |
oldURL | DOMString | 当前页面旧的URL |
参考:
history 路由
通过 popstate
监听 url
中的路径变化,需要客户端和服务端共同的支持
在 history
路由中,我们一定会使用window.history
中的方法,常见的操作有:
- back():后退到上一个路由;会触发 popstate
- forward():前进到下一个路由,如果有的话;会触发 popstate
- go(number):进入到任意一个路由,正数为前进,负数为后退;会触发 popstate
- pushState(obj, title, url):前进到指定的 URL,不刷新页面;不会触发 popstate
- replaceState(obj, title, url):用 url 替换当前的路由,不刷新页面;不会触发 popstate
如何监听 history 路由 的 pushState 和 replaceState
- 本文链接:https://xuehuayu.cn/article/35503.html
- 版权声明:① 标为原创的文章为博主原创,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接。② 标为转载的文章来自网络,已标明出处,侵删。