vue项目点击浏览器返回至指定页面
2019-04-29 17:24
1036 查看
Vue项目点击浏览器返回,返回至指定的页面
需求场景:
在日常开发中,经常会出现一种情况,页面跳转逻辑是,A->B->C->D->E,但是这时候在E页面,点击浏览器返回的时候,希望到G页面,虽然听起来不太可能,或者直接在页面放一个按钮进行路由切换也是可以的,为什么一定是要按浏览器返回,但是事实确实存在;
解决方案:
思路 在vue-router的声明周期中,有切入路由的生命周期事件(beforeRouteEnter)与切出的生命周期事件(beforeRouteLeave),该需求,我们需要在切出的生命周期事件中做判断;判断to.path或者to.name 是不是到D页面的,如果是到D页面,则使用next()进行页面重定向;
/** * 路由离开之前,判断 返回的页面是否是重新添加页面 * @param to 前往的路由参数 * @param form 哪里来的路由参数 * @param next 下一步 * */ beforeRouteLeave(to, from, next){ if(to.name ==='D' ){ next({name: 'G'}); }else { next(); // 注意:这边next必须要写 } },
相关文章推荐
- IOS下 用vue开发前端项目 点击返回 页面出现空白
- vue移动端项目中返回上一路由页面、根据当前路由信息控制返回键的显示与隐藏
- 浏览器点击返回并刷新页面
- vue 项目中 如何动态监听浏览器以及iOS手机微信自带的返回按钮的事件
- 在Java web项目中防止用户注销后使用浏览器中的“后退”按钮返回注销前页面
- 记录处理移动端浏览器点击返回页面不刷新
- js点击返回跳转到指定页面实现过程
- 微信点击链接跳转浏览器打开指定页面的API分享
- 解决用户注销后点击浏览器返回刷新页面重复登录的问题
- 解决点击浏览器返回按钮回到上一页面,页面变为初始界面的问题(java+html)
- 在Java web项目中防止用户注销后使用浏览器中的“后退”按钮返回注销前页面
- 注销返回到登录界面后点击浏览器回退时不能再次进入原页面的方法
- 点击浏览器的返回按钮或手机的返回按钮让页面刷新
- vue 点击按钮 路由跳转指定页面
- 分页操作时,点击上一页或下一页,当返回到指定页面时,该页面被选择的复选框任然被勾中
- vue项目点击侧边栏刷新页面
- (pc、手机端浏览器、微信内)点击返回键,返回到上一个页面浏览的位置的实现
- 浏览器点击返回时,上个页面混乱
- 微信分享了链接点击进去是域名的页面,微信跳转浏览器打开指定页面
- 浏览器返回按钮不会刷新页面解决方案---使用情景:点击浏览器左上角的后退按钮,页面需要刷新的情况