重复跳转路由产生的问题

最新推荐文章于 2023-09-20 16:53:00 发布
最新推荐文章于 2023-09-20 16:53:00 发布
阅读量746 收藏 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
    评论
专栏目录
vue2实现刷新后重新加载动态路由
qq_50994125的博客
04-13 3368
在vue2中，如果使用了动态路由，因为http的无状态性，用户在登录状态下，每次刷新后都需要重新加载路由，否则就会出现刷新后页面丢失。具体实现是通过添加一个前置路由守卫的方法，并设置一个sessionStorage，在每一次跳转路由前进行一次判定。1.登录后设置一个sessionStorage用于判断用户是否刷新。这样就简单的解决了vue2动态路由下刷新后页面丢失的问题。2.设置一个路由前置守卫进行判定。
如何解决刷新后二次加载路由?
最新发布
qq_59068526的博客
10-18 634
如何解决刷新后二次加载路由?
router跳转两次
xiaojinglyd的博客
03-10 4038
环境： vue cli3项目 问题： 路由的参数没有，导致页面报错，实际是路由跳转两次，第一次有参数，第二次没有 分析： 既然跳转了两次首先应该想发起路由跳转的事件里面是否出现重复的this.$router.push，查看一番并没有，于是想到全局的路由守卫中或许出现重复跳转，结果发现还是没有，结果只能打断点调试查看，发现路由跳转的事件没有执行两次，但是路由守卫执行了两次，这说明肯定有地方多调用...
解决路由重复跳转bug
u013729608的专栏
05-09 1449
经过思考，项目其他地方应该是调用路由跳转的方法，例如。
Vue中路由跳转时出现路由重复跳转的问题解决方案
qq_41373791的博客
10-28 4126
第一种方案 出现这种问题是由于安装的vue-router版本太新的问题。所以第一种方案简单直接，直接在命令行中重新安装旧版本的vue-router。yarn add vue-router@3.0 -S 第二种方案 在vue-router的index.js文件中添加下列代码： import Vue from ‘vue’; import Router from ‘vue-router’; const originalPush = Router.prototype.push Router.prototype.p
路由技术解决页面跳转问题
01-19
　页面跳转路由技术，算来并不是一个很新的技术，但却是一项有用的技术。在网站有很多需要跳转的页面，而我们又需要动态地在主页面中加载子页面时，就会用到这门技术。以我们公司现在这个项目为例，前台是由FLEX实现...
Vue路由跳转问题记录详解
08-30
本篇文章主要介绍了Vue路由跳转问题记录详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue相同路由跳转强制刷新该路由组件操作
10-14
为了解决这个问题，可以去掉重复的命名，或者为每个路由提供一个唯一的名称： ```javascript { path: '', redirect: '/fiibox/personHome', // 移除name属性，或为它提供一个唯一值 } ``` 正确地管理和配置路由是...
解决vue单页路由跳转后scrollTop的问题
10-18
本文将详细介绍如何解决Vue单页路由跳转后scrollTop的问题。 首先，这个问题通常是由于浏览器的默认行为导致的。当你通过Vue Router进行路由跳转时，浏览器会记住之前页面的滚动位置。为了解决这个问题，我们可以...
动态路由重复跳转的问题
一一
07-08 434
小姐妹新接手的项目遇到的，用到了动态路由但是debugger调试发现相应角色生成的动态路由children列表里面的值是对的，children中有某个页面但是跳转不过去 盲猜是children赋值时间的问题，姐妹说之前确实有赋值时间不对刷新清空的情况已经改掉了 盲猜是next()的问题然后去翻官网全局前置守卫发现next next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed (确认的)。 next('/')或者 next({ path: '/' }): 跳转.
Vue-router路由跳转 页面的状态保留 与 强制刷新页面
热门推荐
芝芝为荔枝
02-08 1万+
1、遇到的问题 当我们使用 Vue 去实现一个比较大型的SPA单页面的应用时候，通常使用到了vue-router，此时会出现一种场景：左侧是菜单、右侧是页面内容，点击不同的菜单时有时候需要对页面的内容进行以下三种操作 1. 保留状态（例如新增页面 需要保持状态） 2. 刷新页面（列表页面） 3. 根据情况进行 保留 或者 刷新（两种情况动态判断） 对以上问题进行探讨，需要用到 vue-router 中的 <keep-alive> 标签 和 路由跳转携带参数 去解决问题。 2、解决 2.1 对.
vue-router 三级菜单多次加载（onmounted）
xujing_06的博客
06-23 1838
1、使用了<keep-alive></keep-alive> 被包含在<keep-alive>中的组件，会多出两个生命周期钩子函数。 //被激活时执行=>onActivated() //比如从 A 组件，切换到 B 组件，A 组件消失时执行=>onDeactivated() 2、这时三级菜单就会多次onMounted 解决办法： 在三级里面嵌套 vue里面导入onActivated onActivated(()=>{ ..
vue3使用router.push()页面跳转后，该页面不刷新问题
wang13679201813的博客
09-20 6745
这是一个常见问题，当使用push的时候，会向history栈添加一个新记录，这个时候，再添加一个完全相同的路由时，就不会再次刷新了。在页面跳转时加上params参数时间。在跳转到的页面，添加watch监视。
vue-router为什么会加载两遍dom?_一些优化CSS以提高页面加载速度的小技巧
weixin_39966130的博客
12-11 948
不久前，我决定改进我的网站的加载时间。它已经加载的相当快，但我知道仍然有改进的空间，其中之一是CSS加载。我将向您介绍整个过程，并向您展示如何提高加载时间。为什么装载时间重要？因为 时间就是金钱 。这句谚语尤其适用于网页加载时间。您的页面加载时间对您的利润有直接影响。人们更倾向于在快速的电子商店买东西，而不是在速度较慢的商店买东西。根据研究毫秒使百万流动网站的改善幅度为0.1秒，旅游网站的转化率及...
vue router缓存，导致页面多次请求接口
qq_35994750的博客
02-13 1083
ps：所有.vue组件文件都必须附上name属性！建议用vuex管理cachedViews。
vue 多个路由对应同一组件多次调用，页面未刷新问题
BigOrange的博客
10-31 6883
问题现象： 有三个菜单，只是参数不同，但使用的同一个组件页面，配置路由时指向了不同三个路由。但切换菜单时，页面不再刷新。 查了些资料，整理解决方案如下，欢迎纠错补充~ 页面不刷新的原因： 响应路由参数的变化 提醒一下，当使用路由参数时，例如从 /user/foo 导航到 /user/bar，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组...
VUE路由跳转并刷新页面（框架层实现）
伏帅的个人技术博客
12-13 1万+
VUE路由跳转并刷新页面
VUE路由重复错误
qq_32234855的博客
07-16 856
说明文档: https://github.com/vuejs/vue-router/releases?after=v3.3.1 只是遇到了这种情况，然后搬运教程里面的解决方式 1.产生错误的情况：编程式路由跳转到当前路径且参数没有变化时会抛出 NavigationDuplicated(重复导航) 错误 2.原因分析: vue-router3.1.0之后, 引入了push()的promise的语法, 如果没有通过参数指定回调函数就返回一个promise来指定成功/失败的回调, 且内部会判断如果要跳转的路径和.
Vue-router路由代码跳转以及动态路由的详细配置介绍
czj1049561601的博客
02-04 1981
路由代码跳转 有些时候，页面的跳转可能需要执行的对应的JavaScript代码，这个时候就需要使用另外一中跳转方式了 this中有$router这个对象，就相当于app中实例的router。然后添加新的路径进去。 <template> <div id="app"> <router-view></router-view> <h3>我是网站的标题</h3> <router-link to="/hom
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、付费专栏及课程。

余额充值