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)}
}

vue-router next(false) 禁止访问某个页面时，不保留历史访问记录相关推荐

nginx设置禁止访问某个页面及只允许域名访问或某个ip禁止访问
nginx配置访问某页面时提示404或跳转到首页,在server中配置与location同级下 server {if ($request_uri ~* "/xxxx.html"){ ...
vue——router更改路由地址，但是页面不能跳转
在做电商项目时,筛选标签时,需要路由发生变化,但是当前的页面商品列表还需要局部刷新. 如果更改路由后,页面跳转,则是全局刷新,局部刷新才能够满足用户需求. 则此时要做的就是:更改路由地址,但是页面不能 ...
注意避坑，Vue Router 4: 路由参数在 created/setup 时不可用
有梦想,有干货,微信搜索 [大迁世界] 关注这个在凌晨还在刷碗的刷碗智. 本文 GitHub https://github.com/qq449245884/xiaozhi 已收录,有一线大厂面试完整考 ...
python asp.net requests_python3使用requests访问asp页面时出错，返回500
学校的官微有个一键查成绩的功能,我一直很想能做出来玩,现在在学习python,正好准备拿来练手,但是访问的时候却出现了500错误. 以下是代码: python import requests impo ...
Nginx设置访问Web页面时用户名密码验证
1.可能存在的需求网页不想让所有人访问到,只让知道页面密码的人可以打开某些组件的web端管理页面无用户名密码认证可直接打开,添加一个用户验证 ES如果不添加search-guard,是否有别的更简 ...
如何在页面跳转后，再返回上级页面时，保留检索条件，刷新内容
场景: 主页面:main.jsp 子页面:son.jsp 子页面检索条件:zhonglei,mingcheng,countryCodeS,asins,fnskus,skus 部分子页面代码 //这是子 ...
Vue学习笔记（六）--- 前端路由 Vue Router
一.路由 1.概念路由本质上来说就是一种对应关系,比如说我们在浏览器中输入不同的 url 地址,我们就能访问不同的资源,那么这 url 地址与资源之间的对应关系,就是路由. 2.分类 ① 后端路 ...
【Vue】相关生态——Vue Router路由
Vue Router路由基本使用带参数的动态路由匹配捕获所有路由或404 Not found 路由嵌套路由编程式导航重定向和别名将props传递给路由组件不同的历史模式进阶导航守卫 ...
Vue 学习(十、 Vue Router - 路由插件和 Vue 的插件原理)
文章目录一.Vue Router - 路由插件 1. 安装 Vue Router 2. Vue Router 路由的基本使用 3. 设置 router-link 4. 编程式路由 5. 路由嵌套 6 ...

vue-router next(false) 禁止访问某个页面时，不保留历史访问记录

vue-router next(false) 禁止访问某个页面时，不保留历史访问记录相关推荐

最新文章

热门文章