Bootstrap

NavigationDuplicated: Avoided redundant navigation to current location: “/search/abc?k=ABC“.

使用编程式导航时,如果连续多次调用push或者replace就会出现NavigationDuplicated: Avoided redundant navigation to current location: “/search/abc?k=ABC”.

此异常对程序没有影响,只是不美观

解决方法一:传入回调函数

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

因为this.$router.push()会返回一个promise,promise中要传入成功或者失败的回调,有失败的回调才能处理NavigationDuplicated错误,因此可将上述代码改为

this.$router.push({
        name:"search",
        params:{
          keyword:this.keyword
        },
        query:{
          k:this.keyword.toUpperCase()
        }
      },()=>{},  // 成功的回调
      ()=>{}   // 失败的回调
      )

这种写法治标不治本,将来在别的地方使用push|replace时,编程式导航还是会有类似错误

解决方法二:重写push或replace方法

在项目的入口文件main.js中注册了router,因此所有的组件中都有router实例对象
在这里插入图片描述

/**
 * 配置路由的地方
 */
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)
import Home from '@/pages/Home'
import Search from '@/pages/Search'
import Login from '@/pages/Login'
import Register from '@/pages/Register'

// 先把VueRouter原型对象中的push保存一份
let originPush = VueRouter.prototype.push
// 重写push | replace
// 第一个参数:告诉原来的push方法,你往哪里跳转(传递哪些参数)
// 第二个参数:成功的回调
// 第三个参数:失败的回调
VueRouter.prototype.push = function(location, resolve, reject){
    if(resolve && reject){
        /**
         * 如果直接originPush()这样调用,那么上下文是window
         * call和apply的区别
         *  相同点:都可以改变函数的上下文
         *  不同点,call传参用逗号隔开,apply传参使用数组
         */
        originPush.call(this,location, resolve, reject)
    }else{
        // 如果没有回调,那么手动加上回调
        originPush.call(this,location, ()=>{}, ()=>{})
    }
}

export default new VueRouter({
....
})

悦读

道可道,非常道;名可名,非常名。 无名,天地之始,有名,万物之母。 故常无欲,以观其妙,常有欲,以观其徼。 此两者,同出而异名,同谓之玄,玄之又玄,众妙之门。

;