记录一下 vue-router 点击重复报错问题

最新推荐文章于 2024-03-14 10:40:08 发布
最新推荐文章于 2024-03-14 10:40:08 发布
阅读量158 收藏
点赞数
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44326007/article/details/113692647
版权

Vue Router 导航守卫 错误处理 Promise JavaScript
关键词由CSDN通过智能技术生成

在 js 中加入

const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
}
z先生1025
关注
专栏目录
vue-router 3.1.6，.push相同路径时报错的问题 Uncaught(in Promise)
Janus_lian的博客
05-21 764
本来不想将博客作为一个记录踩坑笔记的地方，就想没事写个心情文吖，没想到，又踩坑了。（估计以后还会踩坑很多，因为到了新公司用的和之前都不一样了。。。。） 一、问题描述 使用vue-router跳转相同路由的时，比如在 /defend 路由下，使用 this.$router.push(’/defend’)再次跳转当前路由，控制台会报以下错误。 简单的意思就是：导航重复了（NavigatingDuplicated），message中也说了，不允许导航到当前位置（Navigating to current loc
VUE-ROUTER：VUE路由的安装与使用
算云烟
11-18 1070
文章有参看其他博主文章： 原文：https://www.jianshu.com/p/5dff6811252d vue-router导航守卫原文： https://zhuanlan.zhihu.com/p/54112006， https://segmentfault.com/a/1190000015727279 一、概述： vue-router是vue官方推出的单页面路由管理器，让构建单页面应用变得易如反掌，页面之间的跳转更加灵活自由 vue-router实现原理：SPA(single page
vue 解决addRoutes多次添加路由重复的操作
11-19
我就废话不多说了，大家还是直接看代码吧~ import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) const createRouter = () => new Router({ mode: 'history', routes: [] }) const router = createRouter() export function resetRouter () { const newRouter = createRouter() router.matcher = newRouter.matcher //
vue router连续点击多次路由报错
weixin_47013351的博客
04-17 2087
在编程式导航跳转时候，连续点击多次会报NavigationDuplicated错误 this.$router.push({name: "search"}); 出现这种错误原因是因为vue-router引入了promise,当我们使用this.$router.push时候需要多添加成功或失败的回调，否则就会报出以上的错误。 这时如果我们加入成功和失败的回调，就不会报错： this.$router.push( { name: "search" }, //成功回调 () =&g
Vue-Router解决重复点击路由报错
最新发布
刘一帆的博客
03-14 578
在代码编写中，发现出现路由重复点击后报错的问题（Vue2），查询资料，使用push、to、replace皆没有解决根本问题，后通过学习，添加以下代码，完美解决重复路由报错问题。在main.js加入此代码即可解决。
vue router重复点击报错：NavigationDuplicated 的解决方法
qq_42391080的博客
05-06 848
** vue router重复点击报错：NavigationDuplicated 的解决方法 ** 今天使用的时候报了这个错误，重新装了node_modules包也没办法解决，网上查了一下解决方法很简单，直接附上两段代码，因为我使用push没用生效所以我使用了replace方法，就可以了。 import Router from 'vue-router' const originalPush ...
router重复跳转相同路径出现错误
qq_36481758的博客
08-28 1509
版权声明：本文为博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。 ...
vue-router重写push方法,解决相同路径跳转报错问题
10-14
`this.$router.go(0)`会触发浏览器历史记录中的当前状态，相当于用户点击了浏览器的回退按钮，然后立刻前进，从而达到刷新页面的效果。 总的来说，重写Vue-Router的`push`方法是为了确保即使路径相同，也能正确地...
搞懂vue-router/嵌套、命名路由/路由重定向...（一）
Blueberry
08-20 2593
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、安装二、路由对象1.定义2.路由对象属性三、用法1.项目初始化--引入2.主入口文件App.vue3.嵌套路由 （router-link)嵌套路由配置嵌套路由使用4.动态路由匹配使用场景单个路径参数多段路径参数获取当前路由参数5.编程式导航1.router.push()2.router.reolace()3.router.go(n)6.命名路由 前言 提示：本文是跟随vue-router官网逐步展开，希望能更深入了解vue
手写Vue-router核心原理，再也不怕面试官问我Vue-router原理
weixin_43964148的博客
07-28 796
手写vue-router核心原理 文章目录手写vue-router核心原理一、核心原理1.什么是前端路由？2.如何实现前端路由？hash 实现history 实现二、原生js实现前端路由1.基于 hash 实现2.基于 history 实现三、基于Vue实现VueRouter四、剖析VueRouter本质五、分析Vue.use六、完善install方法七、完善VueRouter类八、完善$route九、完善router-view组件十、完善router-link组件 一、核心原理 1.什么是前端路由？ 在
Vue-router 报错NavigationDuplicated的解决方法
11-21
版本：3.1.x 报错原因： 使用push()、replace()进行导航时，不能重复导航到当前路由。 解决办法： 方法1：在定义路由的文件中router/index.js const originalPush = VueRouter.prototype.push VueRouter.prototype.push = function push (location) { return originalPush.call(this, location).catch(err => err) } const originalReplace = VueRouter.prototype.rep
vue重复点击路由报错问题解决
HDdgut的博客
09-09 665
问题描述：vue-router.esm.js?8c4f:1958 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: “/ups”；/ups是路由相对路径 解决方法： 1.重新安装vue-router依赖包：npm i vue-router@3.0 -S 2.在main.js写入（在引用import VueRouter from 'vue-router’的地方使用） //
vue路由的封装与使用
scclp的博客
11-30 3838
封装路由首先要明确的是业务需求，以及路由的基本原理 下面从几个点进行阐述： 1.关于路由的目录结构 router index.is routes is index.js文件里面存放的是关于路由的一些基本配置 index.js import Vue from 'vue' import VueRouter from "vue-router" import routes from '/routes' Vue.use(VueRouter) //......
VueRouter解决重复点击导航路由报错,Router路由跳转错误
qq_40591925的博客
05-19 586
push方法： const originalPush = VueRouter.prototype.push // 修改 原型对象中的push方法 VueRouter.prototype.push = function push(location) { return originalPush.call(this, location).catch(err=>err) } replace方法： const originalReplace = VueRouter.prototype.r..
vue router小技巧
YoungMan_09的博客
06-07 1323
vue路由切换页面从顶部开始展示，解决路由重复跳转报错问题
[vue] vue router 点击同一路由多次或是push的路由是当前界面的url，报错解决方法
qq_14993591的博客
11-17 619
// 多次点击同一路由报错 const originalPush = VueRouter.prototype.push VueRouter.prototype.push = function push (location) {undefined return originalPush.call(this, location).catch(err => err) } 把这个放在路由router的页面 参考： https://blog.csdn.net/sunlizhen/article/
vue2： Router报错经验--Uncaught (in promise) Error: Navigation cancelled from“/mall“to “/home“ with a new
weixin_1095的博客
08-23 1215
这个错误是vue-router内部错误,没有进行catch处理,导致的编程式导航跳转问题,往同一地址跳转时会报错的情况。push和replace 都会导致这个情况的发生。
vue路由跳转
qq_40983361的博客
08-31 208
解决重复跳转报错 constoriginalPush=Router.prototype.push Router.prototype.push=functionpush(location){ returnoriginalPush.call(this,location).catch(err=>err) } 正常跳转 routes.js {path:'/homePage',component:HomePage}, vue中 this.$router.p...
解决 vue-router 升级导致的 Uncaught (in promise) NavigationDuplicated
高大哥
06-24 2222
编程式导航连续点击进行路由跳转的时候，就会在控制台抛出 Uncaught (in promise) NavigationDuplicated 错误信息，这是因为 vue-router 版本升级到了 v3.1.0 之后，push 和 replace 方法会返回一个 promise，如果没有对错误进行捕获，那么控制台就会输出未捕获异常。...
Can't resolve 'vue-router' in 报错
05-20
这个报错可能是因为你的项目中缺少了 vue-router 模块，需要先安装这个模块。 你可以在命令行中运行以下命令来安装： ``` npm install vue-router --save ``` 或者如果你使用的是 yarn，可以运行以下命令来安装：...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值