vue项目中使用beforeRouterLeave来拦截路由遇到的闪动问题（vant框架）

最新推荐文章于 2024-05-22 19:28:19 发布
最新推荐文章于 2024-05-22 19:28:19 发布
阅读量2.2k 收藏 6
点赞数 7
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/littleBeast____/article/details/113652226
版权

vue项目中使用beforeRouterLeave来拦截路由遇到的闪动问题（vant框架）

在做移动端是提出需求返回是确认是否确认返回，考虑到移动端可能会手滑动屏幕来退出，所以需要采用检测路由变化来让用户选择

开始单纯的在路由守卫中使用组件判断，但是会出现第一次点击有效，后面点击出现页面闪动或者只改变url没有改变页面的问题，在网上搜索有两个解决方案，一个是使用history，另一个是采用定时器来解决，我就是采用了第二种方式

代码如下

beforeRouteLeave(to, from, next) {
   
    next(false)
    if (to.pa
最低0.47元/天 解锁文章
littleBeast____
关注
  • 7
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
[问题探讨]VUE导航守卫beforeRouteLeave实现路由跳转拦截
tom_wong666
10-23 1万+
beforeRouteLeave (to, from, next) { // 必须调用next(),next(true)进入原计划的下个页面 // next(false)进入from页面(即原本的页面) } 代码说明如上，背景是移动端+Vue，此问题的实例demo见git地址： https://github.com/tom-wong666/model.git 问题...
vue使用技巧及vue项目中遇到的问题
08-27
Vue 使用技巧及 Vue 项目中遇到的问题 在本文中，我们将讨论一些 Vue 使用技巧和在 Vue 项目中遇到的问题，并提供解决方案。 1. Vue 路由拦截浏览器后退实现表单保存 在路由组件中，我们可以使用 `...
vue2 和 vue3 的 路由守卫
lzfengquan的博客
06-22 1577
vue-router 路由实现: 路由就是用来跟后端服务器进行交互的一种方式，通过不同的路径，来请求不同的资源，请求不同的页面是路由的其中一种功能。 首先知道有3个参数 to , from, next (意义： to是即将要进入的目标路由对象, from 是当前导航即将要离开的路由对象, next调用该方法后，才能进入下一个钩子函数afterEach )next() // 直接进入to所指的路由 next（false） // 中断当前路由 next(‘route’) // 跳转指定路由 next(‘erro
【Vue3】路由缓存问题
最新发布
weixin_40874076的博客
05-22 244
1.路由缓存问题产生的原因是什么？路由只有参数变化时，会复用组件实例2.俩种方案都可以解决路由缓存问题，如何选择呢？在意性能问题，选择onBeforeUpdate,精细化控制不在意性能问题，选择key，简单粗暴。
解决vue导航守卫beforeRouteLeave浏览器返回时，页面闪烁
qq_37418556的博客
11-24 1350
解决vue导航守卫beforeRouteLeave浏览器返回时，页面闪烁 页面闪烁问题，加上延时可解决 beforeRouteLeave(to, from, next) { if (!this.canReturn) { // 业务判断，无需关注 setTimeout(() => { this.$confirm('离开内容将被清空, 请确认离开？', '提示', { confirmButtonText: '确定', cancel
阻止页面跳转/路由拦截
xiaokangna的博客
08-03 1900
实现方法：使用路由拦截进行拦截操作，就比如我离开这个页面的时候有系列操作需要执行，这时候就可以使用路由拦截beforeRouteLeave。工作日常分享：今天有个需求，在离开这个页面的时候去执行一些按钮操作，但是跳转路由都是统一封装好的。...
Vue中的路由守卫
z12845464的博客
12-29 8331
1.全局守卫2.组件级守卫3.单个路由独享的守卫
vue 跳转路由后返回上一页还是当前页面，但是路由地址有改变（已解决）
weixin_45923100的博客
12-08 8417
在使用beforeRouteLeave()跳转前拦截的时候一定要注意，要执行next()这个回调函数，它的意思是执行跳转的意思，你不写，就不会发生跳转。
详解vantUI框架在vue项目中的应用踩坑
11-26
在Vue项目中， vant UI框架是一个非常流行的组件库，提供了丰富的UI组件，便于开发者快速构建美观的移动应用界面。在本文中，我们将深入探讨 vant UI框架在订单提交地址管理方面的应用，以及在实际开发过程中可能...
详解VUE项目中安装和使用vant组件
10-17
主要介绍了VUE安装和使用vant组件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
解决vue-router路由拦截造成死循环问题
10-14
Vue Router 是 Vue.js 应用中的前端路由管理库，它允许我们通过 URL 来控制页面的导航和组件的渲染。在开发过程中，我们有时需要在路由跳转前进行一些预处理，比如验证用户权限，这就需要用到路由守卫（Navigation ...
常见的 Vue Router 的导航钩子/ 路由导航守卫
小草莓的博客
10-24 1335
这些导航钩子提供了灵活的路由跳转控制机制，可以方便地实现各种复杂的路由跳转需求。同时，VueRouter 还提供了一些其他的导航钩子和高级特性，比如路由元信息、动态路由、命名路由等，可以进一步提高开发效率和应用的可维护性。三、全局守卫、路由独享守卫、组件内置守卫的区别。
关于vue路由离开当前页面进行confirm提示，使用beforeRouteLeave实现
liyi_mowu的博客
12-29 1万+
代码 beforeRouteLeave: function(to, from , next){ next(false) this.$confirm('您将离开本页面，是否进行数据保存？', '提示', { distinguishCancelAndClose: true, confirmButtonText: '确定', ...
vue router 组件内导航守卫 beforeRouteLeave用法，离开界面提示未保存
LPretty_Boy的博客
05-20 4639
1.在methods外面添加beforeRouteLeave方法 beforeRouteLeave(to, from, next) { console.log('beforeRouteLeave come in'); if(this.isSaved === false){ setTimeout(()=>{ this.$confirm('您还未保存页面内容，是否保存当前更改?', '提示', {
VUE路由导航，(路由拦截 登录、权限、跳转限制)。VUE生命周期：beforeRouteLeave
Beatingworldline的博客
10-12 728
需求：用户编辑后，若池中有数据，则在离开页面时提示保存。 由于一个页面不单会有返回，还会有其他各个页面的导航，导致单把逻辑写在返回按钮中无法实现需求。路由导航可以做到： 官方文档 参考 router.beforeEach((to, from, next) => { console.log(to); // 即将要进入路由的对象 console.log(from); // 当前导航要离开的路由对象 console.log(next); // 调用next该方法，才能进入下一个路由 ne
beforeRouterLeave 被触发两次
ZF的博客
09-11 3762
场景：beforeRouterLeave 函数里面有个确认框方法，离开页面前会弹出让用户确认是否离开当前页面，但是有时候点击确认后还会再次弹出确认框。 看到网上说给确认框加上延时函数能解决问题，实践下确实能解决。 但不知道是什么原因导致这个问题，于是检查操作流程，发现弹出两次确认框的情况下，确认框弹出前路由改变了（不应该改变啊），于是去看Vue 文档，检查相关代码发现在 beforeRouterLeave 函数里面使用 next() 方法来实现路由跳转，但项目使用 router.push() 来实现，全部换
Vue3 中 导航守卫 的使用
热门推荐
weixin_62897746的博客
02-11 1万+
正如其名，vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。这里有很多方式植入路由导航中：全局的，单个路由独享的，或者组件级的。 导航守卫可分为：全局前置守卫、全局解析守卫、全局后置守卫、路由独享的守卫、组件内的守卫
vue3路由回退拦截
weixin_70243424的博客
09-13 292
【代码】vue3路由回退拦截。
vue导航守卫beforeRouteLeave浏览器返回时，自定义弹窗提醒用户保存信息
ximenxiafeng的专栏
01-27 996
H5页面中经常会遇到的情况，当前页面点击返回，想要提示弹窗"是否确认离开当前页面"之类的需求。自己试着看了一下网上的方法，大多是alert出系统弹窗。其实要实现自定义弹窗提示，也是很容易的。 从另一个页面点击跳转到当前页（如下），点击浏览器返回按钮，则会弹窗下面的弹窗，点击弹窗确定按钮，页面返回上一页 完整代码 <template> <div class="templ"> <div>123</div> <div c.
Vue项目中遇到的难点及面试重点总结
在Vue的基础部分，我们深入了解了Vue的基本原理，当一个Vue实例创建时，Vue会遍历data中的属性，用Object.defineProperty（或者在vue3.0中使用proxy）将它们转为getter/setter，并且在内部追踪相关依赖，在属性被...
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值