解决:Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location

问题:解决vue路由传递参数时,重复点击会抛出NavigationDuplicated的警告错误

原因:vue-router引入了promise, push的时候会返回一个promise

 goSearch() {
      let result = this.$router.push({
        name: 'search',
        params: { keyword: this.keyword },
        query: { k: this.keyword.toUpperCase() }
      })
      console.log('@', result)
    }
点击导航时,打印结果为Promise;所以需要给promise传入成功与失败的回调,否则一直报错

解决方法一:给push方法直接传成功和失败的回调函数

goSearch() {
      this.$router.push(
        {
          name: 'search',
          params: { keyword: this.keyword },
          query: { k: this.keyword.toUpperCase() }
        },() => {},() => {}
      )
    }

解决方法二:在路由内重写push或replace方法

//src/router/index.js文件
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

let originPush = VueRouter.prototype.push
let originReplace = VueRouter.prototype.replace

VueRouter.prototype.push = function push(location){
  return originPush.call(this,location).catch(err=>err)
}
VueRouter.prototype.replace = function push(location){
  return originReplace.call(this,location).catch(err=>err)
}

猜你喜欢

转载自blog.csdn.net/weixin_71403100/article/details/129770334