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

最新推荐文章于 2024-10-04 09:44:38 发布
最新推荐文章于 2024-10-04 09:44:38 发布
阅读量2.3k 收藏 6
点赞数 7
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/littleBeast____/article/details/113652226
版权
本文介绍了在Vue项目中，特别是在使用Vant框架时，如何通过beforeRouterLeave路由守卫解决路由切换时的页面闪动问题。通过设置定时器来避免第一次有效后出现的闪动或URL改变但页面未更新的问题。
摘要由CSDN通过智能技术生成

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

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

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

代码如下

beforeRouteLeave(to, from, next) {
   
    next(false)
    if (to.pa
最低0.47元/天 解锁文章
littleBeast____
关注
vue拦截路由回退弹窗
qq_19338761的博客
04-28 2065
一，拦截路由回退弹层功能出现的原因：为了增加用户体验 在移动端用户容易误操作回退按键或者左滑，导致页面回退， 特别是大表单页面填写未提交时， 如果出现了这种误操作会导致浪费用户大量精力和时间。 二，由产品提出要求，回退时是否可以增加弹窗拦截 我在网上找了一下，文案极少。 思路就是在页面组件生命周期钩子beforeRouteLeave时进行拦截，确定后改变inter。 三，...
[问题探讨]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 问题...
【Vue3实战】：用导航守卫拦截未保存的编辑，提升用户体验
最新发布
寻找09之夏的博客
10-04 517
Vue3中，用导航守卫防编辑未保存误离页，提升体验。自定义守卫满足需求，防数据丢失。
解决vue导航守卫beforeRouteLeave浏览器返回时，页面闪烁
qq_37418556的博客
11-24 1427
解决vue导航守卫beforeRouteLeave浏览器返回时，页面闪烁 页面闪烁问题，加上延时可解决 beforeRouteLeave(to, from, next) { if (!this.canReturn) { // 业务判断，无需关注 setTimeout(() => { this.$confirm('离开内容将被清空, 请确认离开？', '提示', { confirmButtonText: '确定', cancel
vue使用beforeRouteLeave，浏览器回退时弹窗一闪而过问题记录
qq_43486022的博客
05-27 336
需求是页面跳转时弹窗却仍是否跳转，用的beforeRouteLeave开发。vue是因为closeOnHashChange属性默认为true。1.hash模式改成history。还搜到一些其他解决办法。
阻止页面跳转/路由拦截
xiaokangna的博客
08-03 2014
实现方法：使用路由拦截进行拦截操作，就比如我离开这个页面的时候有系列操作需要执行，这时候就可以使用路由拦截beforeRouteLeave。工作日常分享：今天有个需求，在离开这个页面的时候去执行一些按钮操作，但是跳转路由都是统一封装好的。...
Vue中的路由守卫
z12845464的博客
12-29 8431
1.全局守卫2.组件级守卫3.单个路由独享的守卫
怎么把HTML网页重构为VUE,前端VUE重构之路
weixin_32307021的博客
07-03 7034
今年8月份进入前端重构组，用vue重构jq老工程，记录一下在重构过程中遇到的问题、解决方法和一些心得体会吧。项目技术栈：Vue + Vue-Router + Vuex， UI组件库用的有赞的vant团队介绍：前端重构组共三人，我和一个同届的18年校招生，还有我们的师傅，我们师傅是一个有十年前端工作经验的前端大牛，师傅主要做项目架构和底层方法的封装，也做一些业务逻辑，我们两个主要是负责不同的业务模块...
vue笔记
m0_55546349的博客
05-17 887
如何让flex:1 html:给他以及它的所有父元素设置高度100%； vue: 给app设置高度100% public里index.html也添加body,html{hright:100%} 父元素flex:1;overflow:aoto; 各自overflow:auto; 浏览器自动开启/热更新-端口修改 在项目的根路径下根路径下根路径下根路径下创建一个文件名为vue.config.js module.exports = { devServer: { open: true,
前端面试Vue部分补充（详细）
小卡拉米的博客
01-13 1494
vue-router跳转可以实现单页应用的无刷新跳转，并且可以利用路由钩子进行一些额外的处理，而location.href则是传统的页面跳转方式，会导致页面的刷新。与MVC和MVP模式不同的是，MVVM模式中的视图模型充当了展示器的角色，并且视图和视图模型之间通过数据绑定实现了双向通信。与MVC模式不同的是，MVP模式中的展示器充当了控制器的角色，负责处理用户输入和更新模型和视图之间的通信。当在Vue中给data中的对象属性添加一个新的属性时，新添加的属性不会被Vue实例观察到，也不会触发视图的更新。
VUE面试题（3）--vue常见面试题
MingL520的博客
05-21 571
除了核心功能默认内置的指令 (v-model和v-show)，Vue 也允许注册自定义指令。[info]举个聚焦输入框的例子，如下：autofocus在移动版 Safari 上不工作)。事实上，只要你在打开这个页面后还没点击过任何内容，这个输入框就应当还是处于聚焦状态。// 注册一个全局自定义指令 `v-focus`// 当被绑定的元素插入到 DOM 中时……// 聚焦元素el.focus()})如果想注册局部指令，组件中也接受一个directivesfocus: {// 指令的定义。
vue路由跳转时页面上下抖动问题解决
seeeeeeeeeee的博客
11-19 4892
问题：路由切换跳转到一个页面然后会发现这个页面的布局会先向下闪一下，然后向上闪一下停住。虽然不影响使用，但是看着非常膈应。 原因：其实就是因为路由跳转时有过度效果导致的在跳转的时候上一个路由还占着位置，所以把你布局顶下去了，然后页面跳转完了之后他占位消失，你的布局恢复原状。但是这样虽然只有一秒不到的时间，也造成了布局上下闪了一次，看着就很难受。所以我们想的办法也很简单，就是让他上一个路由消失的时候别占着位置顶我下一个路由的布局不就好了。 解决办法 在你的css中找到fade-leave-to这个属性，然后加
vue 跳转路由后返回上一页还是当前页面，但是路由地址有改变（已解决）
weixin_45923100的博客
12-08 8569
在使用beforeRouteLeave()跳转前拦截的时候一定要注意，要执行next()这个回调函数，它的意思是执行跳转的意思，你不写，就不会发生跳转。
常见的 Vue Router 的导航钩子/ 路由导航守卫
小草莓的博客
10-24 1560
这些导航钩子提供了灵活的路由跳转控制机制，可以方便地实现各种复杂的路由跳转需求。同时，VueRouter 还提供了一些其他的导航钩子和高级特性，比如路由元信息、动态路由、命名路由等，可以进一步提高开发效率和应用的可维护性。三、全局守卫、路由独享守卫、组件内置守卫的区别。
vue中beforeRouteEnter、beforeRouteLeave的应用场景
seimeii的博客
08-10 3886
vue中beforeRouteEnter、beforeRouteLeave的应用场景
关于vue路由离开当前页面进行confirm提示，使用beforeRouteLeave实现
liyi_mowu的博客
12-29 1万+
代码 beforeRouteLeave: function(to, from , next){ next(false) this.$confirm('您将离开本页面，是否进行数据保存？', '提示', { distinguishCancelAndClose: true, confirmButtonText: '确定', ...
路由守卫的详解
热门推荐
qq_59076775的博客
05-12 2万+
路由守卫总共有7个 全局路由守卫: beforeEach 前置守卫 affterEach 后置守卫 beforeResolve 解析守卫 路由的守卫 beforeRouterEnter 进入组件之前触发,在Created前面 beforeRouterUpdated 路由更新但是内容不会改变 beforeRouterLeave 离开之前触发,在beforeDestory之前触发 路由独享守卫 beforeEnter 读取路由的信息 一.进入一个页面路由所执行的钩子
vue router 组件内导航守卫 beforeRouteLeave用法，离开界面提示未保存
LPretty_Boy的博客
05-20 4866
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 762
需求：用户编辑后，若池中有数据，则在离开页面时提示保存。 由于一个页面不单会有返回，还会有其他各个页面的导航，导致单把逻辑写在返回按钮中无法实现需求。路由导航可以做到： 官方文档 参考 router.beforeEach((to, from, next) => { console.log(to); // 即将要进入路由的对象 console.log(from); // 当前导航要离开的路由对象 console.log(next); // 调用next该方法，才能进入下一个路由 ne
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值