错误 “Avoided redundant navigation to current location...” 的解决方案-Toy模板网

这篇具有很好参考价值的文章主要介绍了错误 “Avoided redundant navigation to current location...” 的解决方案。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

当 vue 项目中使用 vue-router 的编程式导航写法进行路由切换时：

// Search/index.vue
<button @click="goSearch" v-model="keyword">搜索</button>  //按钮绑定事件，切换路由

methods: {
    goSearch() {
      this.$router.push({     //编程式导航
        name: 'search',
        params: {
          keyword: this.keyword,
        },
        query: {
          k: this.keyword.toUpperCase()
        }
      })
    }
  }

如果用户在页面多次点击按钮时，浏览器的控制台报如下错误：

avoided redundant navigation to current location,Error Logs,Front-end Blogs,vue.js,前端,javascript 文章来源地址https://www.toymoban.com/news/detail-572924.html

错误原因： vue-router 实例上的 push 方法返回的是 promise 对象，所以传入的参数期望有一个成功和失败的回调，如果省略不写则会报错。

解决方案一：每次使用 push 方法时带上两个回调函数：

this.$router.push(`/search/${this.keyword}}`, ()=>{}, ()=>{})  
//第二、第三个参数分别为成功和失败的回调函数

解决方案二：重写 Vue-router 原型对象上的 push 函数：

let originPush =  VueRouter.prototype.push;  //备份原push方法

VueRouter.prototype.push = function (location, resolve, reject){
    if (resolve && reject) {    //如果传了回调函数，直接使用
        originPush.call(this, location, resolve, reject);
    }else {                     //如果没有传回调函数，手动添加
        originPush.call(this, location, ()=>{}, ()=>{}); 
    }
}

到了这里，关于错误 “Avoided redundant navigation to current location...” 的解决方案的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！