Vue项目，搜索多次执行相同的push问题

这个业务逻辑多少都有点奇怪了，阅读浏览次数增值在新闻详情页的控制器方法里setInc，这怎么还写进模型事件里了。如果非要用onAfterRead也可以，把新闻文章的内容单独分出来一个news_content表，然后把它和news做关联，然后给news_content表的onAfterRead事件做增值处理，这样点进新闻页内查询到文章内容时才会触发它。: 评 TP6模型事件-查询后onAfterRead不好用

文章标签更多

ThinkPHP (254)

Mysql (58)

DedeCms (33)

jQuery (67)

证件照 (1)

尺寸大小 (2)

背景颜色 (1)

setInc (4)

setDec (4)

onclick (5)

友情链接更多

超纯水设备

免费设计

海报设计

快递查询

打开边栏(ESC) 关闭边栏(ESC)

多次执行相同的push问题，控制台会出现警告

例如：使用this.$router.push({name:‘Search’,params:{keyword:“…”||undefined}})时，如果多次执行相同的push，控制台会出现警告。

let result = this.$router.push({name:"Search",query:{keyword:this.keyword}})
console.log(result)

vue-router.esm.js?3423:2046 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: "/search/213112333?k=213112333".
    at createRouterError (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:1714:15)
    at createNavigationDuplicatedError (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:1702:15)
    at HashHistory.confirmTransition (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:1964:18)
    at HashHistory.transitionTo (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:1900:8)
    at HashHistory.push (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:2275:10)
    at eval (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:2531:24)
    at new Promise (<anonymous>)
    at VueRouter.push (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:2530:12)
    at VueComponent.goSearch (webpack-internal:///./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/Header/index.vue?vue&type=script&lang=js&:20:20)
    at invokeWithErrorHandling (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:2892:26)

原因：push是一个promise，promise需要传递成功和失败两个参数，我们的push中没有传递。
方法：this.$router.push({name:‘Search’,params:{keyword:“…”||undefined}},()=>{},()=>{})后面两项分别代表执行成功和失败的回调函数。
这种写法治标不治本，将来在别的组件中push|replace,编程式导航还是会有类似错误
push是VueRouter.prototype的一个方法，在router中的index重写该方法即可(看不懂也没关系，这是前端面试题)

//1、先把VueRouter原型对象的push，保存一份
let originPush = VueRouter.prototype.push;
//2、重写push|replace
//第一个参数：告诉原来的push，跳转的目标位置和传递了哪些参数
VueRouter.prototype.push = function (location,resolve,reject){
    if(resolve && reject){
        originPush.call(this,location,resolve,reject)
    }else{
        originPush.call(this,location,() => {},() => {})
    }
}

另一篇笔记：

编程式导航路由跳转到当前路由(参数不变), 多次执行会抛出NavigationDuplicated的警告错误?

注意:编程式导航（push|replace）才会有这种情况的异常，声明式导航是没有这种问题，因为声明式导航内部已经解决这种问题。
为什么会出现这种现象:
由于vue-router最新版本3.5.2，引入了promise，当传递参数多次且重复，会抛出异常，
第一种解决方案：是给push函数，传入相应的成功的回调与失败的回调,但是以后再用push|replace还是会出现类似现象，因此我们需要从‘根’治病；

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

第二种解决方案: 在配置路由时重写push方法

// 把VueRouter 原型对象的push, replace方法, 保存一份
let originPush = VueRouter.prototype.push;
let originReplace = VueRouter.prototype.replace;
// 重写push, replace
// 第一个参数: 告诉原来的push方法, 要往哪里跳(传递那些参数)
// 第二个参数: 成功时的回调
// 第三个参数: 失败时的回调
// call || apply的区别
// 相同点: 都可以调用函数一次, 都可以修改this指向一次
// 不同点: call传递参数用逗号隔开, apply则使用数组
VueRouter.prototype.push = function(location, resolve, reject){
  if(resolve && reject) {
    // originPush()  不能直接调用, 此时this会指向window, 要使用 .call进行调用
    originPush.call(this, location, resolve, reject, );
  }else {
    originPush.call(this, location, ()=>{}, ()=>{})
  }
},
VueRouter.prototype.replace = function(location, resolve, reject){
  if(resolve && reject) {
    originReplace.call(this, location, resolve, reject, );
  }else {
    originReplace.call(this, location, ()=>{}, ()=>{})
  }
}