浏览器点击后退提示_点击浏览器返回按钮出现“闪屏”问题

window.history.pushstate的用法：https://blog.csdn.net/bocongbo/article/details/81667054​blog.csdn.nethistory.pushState 实现浏览器页面不刷新修改url链接​www.cnblogs.com

前言：

需求：

1、页面“返回”按钮的逻辑：

1)进入页面之后，什么也没有做，点击返回按钮可直接返回；

2)进入页面之后，做了点什么，需要给用户提示；

①当商品“已上架”时，弹框提示是否发布更新

②当商品“未上架”时，弹框提示是否保存

3)当用户“无意”间点击侧边菜单栏时，弹框提示是否离开当前页面；

实际中出现的问题，就是当用户点击浏览器返回时页面会出现闪屏，

beforeRouteLeave (to, from, next) {

if (this.canGoback()) {

next()

} else if (this.dialogCanGo) {

next()

} else {

this.$confirm('是否离开当前页面？', {

confirmButtonText: '是',

cancelButtonText: '否'

}).then(() => {

next()

}).catch(() => {

}

}

},

然后点击浏览器返回，出现闪屏后再点击“返回”按钮返回上一页时，就不是“上一页了”，浏览器的“上一页”记录已经更改；

解决方法：应用window.history.pushatate，代码更改

beforeRouteLeave (to, from, next) {

if (this.canGoback()) {

console.log('this.canGoback()')

next()

} else if (this.dialogCanGo) {

next()

} else {

this.$confirm('是否离开当前页面？', {

confirmButtonText: '是',

cancelButtonText: '否'

}).then(() => {

next()

}).catch(() => {

// 重点，重点，这里是重点，解决掉点击的闪屏问题

if (window.history && window.history.pushState) {

history.pushState(null, null)

window.addEventListener('popstate', this.originGoBack, false)

}

})

}

},

// 挂载完成后，判断浏览器是否支持popstate

mounted () {

if (window.history && window.history.pushState) {

history.pushState(null, null)

window.addEventListener('popstate', this.originGoBack, false)

}

this.getCompanys()

},

// 页面销毁时，取消监听。否则其他vue路由页面也会被监听

destroyed () {

window.removeEventListener('popstate', this.originGoBack, false)

},

// 将监听操作写在methods里面，removeEventListener取消监听内容必须跟开启监听保持一致，所以函数拿到methods里面写

methods: {

originGoBack () {

// replace替换原路由，作用是避免回退死循环；注意理解这句话是什么含义，不知道的话就把这行代码注释点你试试

this.$router.replace({path: '/mergePage'}) 返回到上一个页面

},

}

PPS：history.pushState() 方法不知道是干什么的就点开第一个链接好好看看