vue项目实现监听移动端的返回键
mounted() {// 如果支持 popstate (一般移动端都支持)if (window.history && window.history.pushState) {// 往历史记录里面添加一条新的当前页面的urlhistory.pushState(null, null, document.URL);// 给 popstate 绑定一个方法 监听页面刷新window.add
·
实现原理:
通过history.pushState来将页面路径加入历史记录中,在点击返回键的时候会触发popstate事件,所以给popstate绑定一个返回方法就好了。
实现代码:
在App.vue中添加以下代码:
mounted() {
//挂载成功后给pop事件绑定一个方法
// 如果支持 popstate (一般移动端都支持)
if (window.history && window.history.pushState) {
// 往历史记录里面添加一条新的当前页面的url
history.pushState(null, null, document.URL);
// 给 popstate 绑定一个方法用来监听页面返回
window.addEventListener('popstate', this.back, false); //false阻止默认事件
}
},
//组件销毁后清除事件
destroyed() {
window.removeEventListener('popstate', this.back, false); //false阻止默认事件
},
methods: {
back() {
console.log("监听到了");
this.$router.push({
name: index
})
}
}
更多推荐
已为社区贡献13条内容
所有评论(0)