重复跳转路由产生的问题

最新推荐文章于 2023-10-18 18:20:39 发布
最新推荐文章于 2023-10-18 18:20:39 发布
阅读量745 收藏 3
点赞数
分类专栏： web前端开发 文章标签： vue javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47547625/article/details/107450156
版权

最近在学习Vue路由的时候发现了这样一个bug
在这里插入图片描述
在网上的通用解法是：
在route文件中的index.js(你的不一定叫这名称)中加入这样一段代码 ==> 注意位置
在这里插入图片描述

两极反转......可能是实用的，但是我没成功

在这里插入图片描述

话说这全网普遍认可的解决方案不应该有问题，所以......
后来认真的看了一下，果然发现了端倪

在这里插入图片描述

我在跳转链接时使用的是replace方式，而这里的解决方案是push
所以——真相只有一个：把push改为replace
这是个人习惯问题，既然方法换成replace，定义的变（常）量也改一下吧

在这里插入图片描述

codefan※
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
路由技术解决页面跳转问题
01-19
　页面跳转路由技术，算来并不是一个很新的技术，但却是一项有用的技术。在网站有很多需要跳转的页面，而我们又需要动态地在主页面中加载子页面时，就会用到这门技术。以我们公司现在这个项目为例，前台是由FLEX实现...
解决vue单页路由跳转后scrollTop的问题
10-18
本文将详细介绍如何解决Vue单页路由跳转后scrollTop的问题。 首先，这个问题通常是由于浏览器的默认行为导致的。当你通过Vue Router进行路由跳转时，浏览器会记住之前页面的滚动位置。为了解决这个问题，我们可以...
路由跳转重复点击报错
weixin_44867704的博客
04-02 781
在路由切换时重复点击报错的解决方案： 这是Vue-Router4.0之后版本常见的问题，我们重复点击同一个路由会造成router延时，路由冗余， 跳转过程中报错 解决办法：在点击事件结束后抛出一个catch即可 //为了使双击不报错，所以在路由切换时抛出一个err this.$router.replace(this.path).catch(err=>err) ...
vue 路由重复跳转报错问题
weixin_44042792的博客
01-12 482
直接添加下面代码即可 //获取原型对象上的push函数 const originalPush = VueRouter.prototype.push //修改原型对象中的push方法 VueRouter.prototype.push = function push(location) { return originalPush.call(this, location).catch(err => err) } ...
动态路由重复跳转的问题
一一
07-08 431
小姐妹新接手的项目遇到的，用到了动态路由但是debugger调试发现相应角色生成的动态路由children列表里面的值是对的，children中有某个页面但是跳转不过去 盲猜是children赋值时间的问题，姐妹说之前确实有赋值时间不对刷新清空的情况已经改掉了 盲猜是next()的问题然后去翻官网全局前置守卫发现next next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed (确认的)。 next('/')或者 next({ path: '/' }): 跳转.
Vue-router-路由重复跳转 报错解决
Coding
05-30 384
Vue-router-路由重复跳转 报错解决
Vue路由跳转问题记录详解
08-30
本篇文章主要介绍了Vue路由跳转问题记录详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue相同路由跳转强制刷新该路由组件操作
10-14
为了解决这个问题，可以去掉重复的命名，或者为每个路由提供一个唯一的名称： ```javascript { path: '', redirect: '/fiibox/personHome', // 移除name属性，或为它提供一个唯一值 } ``` 正确地管理和配置路由是...
记一次路由的反复跳转
heartandwater的博客
11-11 264
最近又在原本的一坨菜单导航代码里加了 一些的额外的操作。然后这个操作里涉及到异步获取数据， 导航过去了数据还没到，导致其他的逻辑报错，于是我把这个请求封在一个Promise里 如果有数据还是直接走，没有就去promise的回调里。 只不过这段逻辑 是放在 路由变化监听里的， 我一不留神 把后面的跳转逻辑也写进来了 。这就导致 路由一变化 ，就触发这个逻辑然后就又跳了一下。这不是重定向，的确跳了两次。 最后 重点就是 在路由监听逻辑里不要写跳转，路由拦截不一样。 ...
解决 Vue 重复点击相同路由，出现 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation 问题
io_123io_123的博客
02-24 914
解决 Vue 重复点击相同路由
路由跳转相同路径报错问题解决
Ma_lunan的博客
08-13 652
路由跳转相同路径报错问题解决 //router.js加入 const originalPush = Router.prototype.push Router.prototype.push = function push(location) { return originalPush.call(this, location).catch(err => err) } //解决刷新页面404 export default new Router({ mode: 'history', base
如何阻止页面重复router跳转同一路由
haya的博客
07-08 2608
引发的问题：重复跳转 路由path会叠加 造成404 解决： 在跳转前判断是否已在目标页面（vue） 代码： //首先引入cookies import cookies from 'cookies' //进入页面标注 1 mounted（）{ cookies.set('isexit','1') }， //离开页面标注 0 beforeRouterLeave(){ cookies....
vue中路由拦截无限循环的情况
weixin_30925411的博客
09-16 542
router.beforeEach(async (to, from, next) => { if (token) { if (whiteList.indexOf(to.path) != -1) { next() } else { next('404') } } else { co...
跳转重复路由的处理
Donnien的博客
07-23 227
错误 NavigationDuplicated: Avoided redundant navigation to current location: "/comment/108". 解决方法 // 跳转重复路由处理 this.$router.push({ path: `/comment/${this.post.id}` }).catch(() => {});
router跳转两次
lyd的博客
03-10 4274
环境： vue cli3项目 问题： 路由的参数没有，导致页面报错，实际是路由跳转两次，第一次有参数，第二次没有 分析： 既然跳转了两次首先应该想发起路由跳转的事件里面是否出现重复的this.$router.push，查看一番并没有，于是想到全局的路由守卫中或许出现重复跳转，结果发现还是没有，结果只能打断点调试查看，发现路由跳转的事件没有执行两次，但是路由守卫执行了两次，这说明肯定有地方多调用...
vue2实现刷新后重新加载动态路由
qq_50994125的博客
04-13 3359
在vue2中，如果使用了动态路由，因为http的无状态性，用户在登录状态下，每次刷新后都需要重新加载路由，否则就会出现刷新后页面丢失。具体实现是通过添加一个前置路由守卫的方法，并设置一个sessionStorage，在每一次跳转路由前进行一次判定。1.登录后设置一个sessionStorage用于判断用户是否刷新。这样就简单的解决了vue2动态路由下刷新后页面丢失的问题。2.设置一个路由前置守卫进行判定。
如何解决刷新后二次加载路由?
最新发布
qq_59068526的博客
10-18 627
如何解决刷新后二次加载路由?
vue前置路由守卫重复跳转
08-19
因此，在使用前置路由守卫时，需要注意避免在满足某个条件时重复调用`next()`函数，以避免重复跳转的问题。<span class="em">1</span><span class="em">2</span><span class="em">3 #### 引用[.reference_title] - *...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值