js实现无刷新监听URL的变化示例代码详解
作者:zpfei 时间:2024-04-17 09:43:16
无刷新改变路由的两种方法通过hash改变路由
代码
window.location.hash='edit'
效果
http://xxxx/#edit
通过history改变路由
history.back(): 返回浏览器会话历史中的上一页,跟浏览器的回退按钮功能相同
history.forward():指向浏览器会话历史中的下一页,跟浏览器的前进按钮相同
history.go(): 可以跳转到浏览器会话历史中的指定的某一个记录页
history.pushState()可以将给定的数据压入到浏览器会话历史栈中,该方法接收3个参数,对象,title和一串url。pushState后会改变当前页面url
history.replaceState()将当前的会话页面的url替换成指定的数据,replaceState后也会改变当前页面的url
监听url变化
监听hash变化
window.onhashchange=function(event){
console.log(event);
}
//或者
window.addEventListener('hashchange',function(event){
console.log(event);
})
监听back/forward/go
如果是history.back(),history.forward()、history.go()那么会触发popstate事件
window.addEventListener('popstate', function(event) {
console.log(event);
})
但是,history.pushState()和history.replaceState()不会触发popstate事件,所以需要自己手动增加事件
监听pushState/replaceState
history.replaceState和pushState不会触发popstate事件,那么如何监听这两个行为呢。可以通过在方法里面主动的去触发popstate事件。另一种就是在方法中创建一个新的全局事件。
改造
const _historyWrap = function(type) {
const orig = history[type];
const e = new Event(type);
return function() {
const rv = orig.apply(this, arguments);
e.arguments = arguments;
window.dispatchEvent(e);
return rv;
};
};
history.pushState = _historyWrap('pushState');
history.replaceState = _historyWrap('replaceState');
监听
window.addEventListener('pushState', function(e) {
console.log('change pushState');
});
window.addEventListener('replaceState', function(e) {
console.log('change replaceState');
});
来源:https://segmentfault.com/a/1190000022822185
标签:js,监听,url
0
投稿
猜你喜欢
python+gdal+遥感图像拼接(mosaic)的实例
2023-02-22 23:40:34
Pycharm报错Non-zero exit code (2)的完美解决方案
2023-12-04 13:57:52
sql server数据库最大Id冲突问题解决方法之一
2012-01-05 19:28:42
table 行转列的sql详解
2024-01-27 00:44:57
Python使用Keras OCR实现从图像中删除文本
2022-07-22 20:50:24
SQL Server数据库连接查询和子查询实战案例
2024-01-15 02:44:21
dubbo中zookeeper请求超时问题:mybatis+spring连接mysql8.0.15的配置
2024-01-13 21:40:23
django 做 migrate 时 表已存在的处理方法
2022-02-14 16:11:53
JavaScript字典与集合详解
2024-04-16 09:28:13
探讨:如何查看和获取SQL Server实例名
2024-01-18 03:47:42
浅析php与数据库代码开发规范
2024-05-02 17:33:59
vue中watch监听器用法之deep、immediate、flush
2024-04-27 16:13:35
mysql数据库中的索引类型和原理解读
2024-01-19 20:48:17
关于MySQL 大批量插入时如何过滤掉重复数据
2024-01-17 10:42:51
Python网页解析利器BeautifulSoup安装使用介绍
2021-06-12 05:00:00
Python实现App自动签到领取积分功能
2021-09-16 15:59:59
详解vue-router 2.0 常用基础知识点之router.push()
2024-04-09 10:49:35
oracle-快速删除重复的记录
2008-01-16 19:12:00
MYSQL的DATE_FORMAT()格式化日期
2009-02-27 16:04:00
一文弄懂MySQL索引创建原则
2024-01-14 07:38:25