错误 “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()}})}}

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

错误原因： 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...” 的解决方案相关推荐

解决报错：Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: “
报错内容: vue-router.esm.js?68cf:2065 Uncaught (in promise) NavigationDuplicated: Avoided redundant navi ...
四种解决Vue中重复点击相同路由控制台报错问题（ Avoided redundant navigation to current location）
vue-router 升级到3.1.x 后,重复点击导航时,控制台出现报错 ,虽然不影响功能使用,但是看的就不舒服. 报错信息 Uncaught (in promise) NavigationDupl ...
vue2里面的Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location
编程式导航跳转到当前路由(参数不变),多次执行就会在控制台出现如下结果: 怎么解决: (1)最有效--重写push.replace 在router-index.js中添加: // 重写push.rep ...
前端开发：Vue项目报错NavigationDuplicated：Avoided redundant navigation to current location：“/XXX”的解决方法
最近在Vue项目开发的过程中遇到一个问题,那就是在点击同一个路由操作的时候,控制台会报一下错误提示: Uncaught (in promise) NavigationDuplicated: Avoid ...
Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: “/deta
Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: " ...
vue 跳转报 NavigationDuplicated: Avoided redundant navigation to current location: “/to-do“.
错误提示:NavigationDuplicated: Avoided redundant navigation to current location: "/to-do". 提示这 ...
解决Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location问题
在Vue路由中遇到Error: Avoided redundant navigation to current location:xxxx:错误,意思是路由重复在router文件夹下的index.j ...
解决Vue报错：Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location
问题描述:重复点击导航时,控制台出现报错 ,虽然不影响功能使用,但也不能坐视不管. 解决 Vue 重复点击相同路由,出现 Uncaught (in promise) NavigationDuplica ...
Avoided redundant navigation to current location
在VUE中路由遇到Error: Avoided redundant navigation to current location:报错显示是路由重复, 虽然对项目无影响,但是看到有红的还是不舒服. 于 ...

错误 “Avoided redundant navigation to current location...” 的解决方案

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

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

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

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

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

错误 “Avoided redundant navigation to current location...” 的解决方案相关推荐

最新文章

热门文章

错误 “Avoided redundant navigation to current location...” 的解决方案

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

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

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

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

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

错误 “Avoided redundant navigation to current location...” 的解决方案相关推荐

最新文章

热门文章

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

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