vue如何控制浏览器前进后退操作
公司cms后台系统,导航功能比较复杂,点击浏览器后退按钮,发现路由改变,顶部还有左侧导航未改变,导航如下图,经查阅先找到一种可行的方法,问题已解决。在default.vue中加入如下代码:具体操作如下:1.挂载完成后,判断浏览器是否支持popstatemounted(){if (window.history && window.history...
·
公司cms后台系统,导航功能比较复杂,点击浏览器后退按钮,发现路由改变,顶部还有左侧导航未改变,导航如下图,经查阅先找到一种可行的方法,问题已解决。
在default.vue中加入如下代码:
具体操作如下:
1.挂载完成后,判断浏览器是否支持popstate
mounted(){
if (window.history && window.history.pushState) {
history.pushState(null, null, document.URL);
window.addEventListener('popstate', this.cancel, false);
}
},
2.页面销毁时,取消监听。否则其他vue路由页面也会被监听
destroyed(){
window.removeEventListener('popstate', this.cancel, false);
}
3、将监听操作写在methods里面,removeEventListener取消监听内容必须跟开启监听保持一致,所以函数拿到methods里面写
cancel: function() {
if(this.orderId){
this.$router.push({
name:"orderList",
params: {id:this.orderId},
});
}else{
this.$router.go(-1);
}
},
注:cancel方法中的处理可根据自己的业务需要来写,上述方法仅供参考,步骤1,2中的方法可以照搬。
更多推荐
已为社区贡献1条内容
所有评论(0)