欢迎光临
我的个人博客网站

Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: "/xxx". at createRouterError 的说明和解决


错误说明

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

具体例子可看下面。

错误定位

<template>   <div @click="toDetail(item.articleId)">     <el-button @click="toDetail(item.articleId)">阅读</el-button>   </div> </template>  <script> export default{   methods:{     toDetail(id) {       this.$router.push({ name: 'detail', params: { articleId: id } })     }   } } </script> 

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

错误解决

方法一

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

方法二

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

import Vue from 'vue' import VueRouter from 'vue-router'  Vue.use(VueRouter)  // 捕获push replace中的错误 // 当然在replace中的错误也是可以相同的进行捕获 const originalPush = VueRouter.prototype.push const originalReplace = VueRouter.prototype.replace // push VueRouter.prototype.push = function push(location, onResolve, onReject) {   if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject)   return originalPush.call(this, location).catch(err => err) } // replace VueRouter.prototype.replace = function push(location, onResolve, onReject) {   if (onResolve || onReject) return originalReplace.call(this, location, onResolve, onReject)   return originalReplace.call(this, location).catch(err => err) } 
赞(0) 打赏
未经允许不得转载:张拓的天空 » Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: "/xxx". at createRouterError 的说明和解决
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏