无刷新改变路由的两种方法通过hash改变路由
代码
window.location.hash='edit'
效果
通过history改变路由
监听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'); });
总结
到此这篇关于js如何无刷新监听url的变化的文章就介绍到这了,更多相关js 无刷新监听url变化内容请搜索移动技术网以前的文章或继续浏览下面的相关文章希望大家以后多多支持移动技术网!
如对本文有疑问, 点击进行留言回复!!
asp.net中ajax和一般处理程序(handler.ashx)的交互
egg.js创建项目,目录介绍,简单使用,sequelize mysql使用
网友评论