vue-router next(false) 禁止访问某个页面时,不保留历史访问记录问题
作者：爱忽悠的唐唐
这篇文章主要介绍了vue-router next(false) 禁止访问某个页面时,不保留历史访问记录问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
用户正常访问流程为 产品列表页面【a页面】->产品详情页面（选择不同的计划价格因素后点击购买）【b页面】->产品购买页面【c页面】
下面进行如下操作
c页面 按 <- 返回键 返回了b页面，
而B页面想通过 -> 前进键 回到 c页面。
这样的操作是不被允许的。
于是
我写了如下代码
/** 防止从填写表单页面后退之后又前进，会丢失之前所选择的计划价格和价格因素 */
beforeRouteEnter (to, from, next) {
if (from.name === 'orderInput') {
sessionStorage.setItem('preventForward', true)
}
next()
},
beforeRouteLeave (to, from, next) {
// 如果是从表单填写页返回的并且不是通过购买按钮去往表单填写页面
if (to.name === 'orderInput' && sessionStorage.getItem('preventForward') === 'true') {
this.showToast('请点击购买按钮进行购买')
next(false)
} else {
next()
}
},
method:{
buy(){
sessionStorage.setItem('preventForward', false)
}
}
但是这个操作会有一个问题，当我阻止了一次去往c页面的操作next(false)之后， 如果在b页面 按返回键， 按我们预想的，应该要返回a页面。
可这个时候，实际会返回到 c页面。
原因就是c页面虽然被我们阻止了，却进入了历史栈中, 我想了个方法来防止这个被禁止的请求加入到栈中。
也就是在 next(false) 前面加入
this.$router.go(-1)
整体代码
如下：
beforeRouteEnter (to, from, next) {
if (from.name === 'orderInput') {
sessionStorage.setItem('preventForward', true)
}
next()
},
beforeRouteLeave (to, from, next) {
// 如果是从表单填写页返回的并且不是通过购买按钮去往表单填写页面
if (to.name === 'orderInput' && sessionStorage.getItem('preventForward') === 'true') {
this.$router.go(-1)
this.showToast('请点击购买按钮进行购买')
//这里把next（false）也去掉。兼容移动端。否则在微信操作时，会重复提醒上面那句话
// next(false)
} else {
next()
}
},
method:{
buy(){
sessionStorage.setItem('preventForward', false)
}
}
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。