经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » JavaScript » 查看文章
Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: "/xxx". at createRouterError 的说明和解决
来源:cnblogs  作者:会飞的一棵树  时间:2021/4/19 8:55:55  对本文有异议

错误说明

Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: "/xxx". at createRouterError
这个错误是说着在promise里捕获了一个导航的重复定义,因为这里是使用编程式导航去进行路由跳转的,$router.push方法会返回一个promise对象。在这里重复的push了同一个路由地址,所以就报了这个错误。
有时也会报这个错Uncaught (in promise) Error: Navigation cancelled from "/xxx" to "/xxx" with a new navigation

具体例子可看下面。

错误定位

  1. <template>
  2. <div @click="toDetail(item.articleId)">
  3. <el-button @click="toDetail(item.articleId)">阅读</el-button>
  4. </div>
  5. </template>
  6. <script>
  7. export default{
  8. methods:{
  9. toDetail(id) {
  10. this.$router.push({ name: 'detail', params: { articleId: id } })
  11. }
  12. }
  13. }
  14. </script>

因为el-button是在div里的,所按钮点击的时候会有两个click都调用了相同的push

错误解决

方法一

把嵌套的子元素中的触发路由的事件去掉,这里把el-button中的click去掉就行了。

方法二

因为这个错误是在push中抛出的,所以在其中捕获catch这个错误就行了,不过这似乎是个治标不治本的办法,所有在push中的错误都可以用此法捕获。
在路由中,添加如下代码进行配置:

  1. import Vue from 'vue'
  2. import VueRouter from 'vue-router'
  3. Vue.use(VueRouter)
  4. // 捕获push replace中的错误
  5. // 当然在replace中的错误也是可以相同的进行捕获
  6. const originalPush = VueRouter.prototype.push
  7. const originalReplace = VueRouter.prototype.replace
  8. // push
  9. VueRouter.prototype.push = function push(location, onResolve, onReject) {
  10. if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject)
  11. return originalPush.call(this, location).catch(err => err)
  12. }
  13. // replace
  14. VueRouter.prototype.replace = function push(location, onResolve, onReject) {
  15. if (onResolve || onReject) return originalReplace.call(this, location, onResolve, onReject)
  16. return originalReplace.call(this, location).catch(err => err)
  17. }

原文链接:http://www.cnblogs.com/flytree/p/14669009.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号