美文网首页
重写VueRouter原型上push和replace方法

重写VueRouter原型上push和replace方法

作者: glassUp | 来源:发表于2022-04-02 15:59 被阅读0次

    编程式导航路由跳转到当前路由(参数不变), 多次执行会抛出NavigationDuplicated的警告错误?
    注意:编程式导航(push|replace)才会有这种情况的异常,声明式导航是没有这种问题,因为声明式导航内部已经解决这种问题。这种异常,对于程序没有任何影响的。
    为什么会出现这种现象:
    由于vue-router引入了promise,当传递参数多次且重复,会抛出异常,因此出现上面现象,
    第一种解决方案:是给push函数,传入相应的成功的回调与失败的回调

    //路由跳转时,指定跳转成功的或跳转失败的回调函数
    this.$router.push(`/search/${this.keyword}`,()=>{},()=>{})
    

    第一种解决方案可以暂时解决当前问题,但是以后再用push|replace还是会出现类似现象,因此我们需要从根本解决

    /* 重写push,replace */
    let orginPush =VueRouter.prototype.push;
    let orginRepalce = VueRouter.prototype.replace;
    
    VueRouter.prototype.push = function(location,resolve,reject){
      //如果外界传入了resolve和rejected回调,那么就用外部传入的
      if(resolve&&reject){
        //这里的this指的是组件实例上的vueRouter(this.$router)
        orginPush.call(this,location,resolve,reject)
      }else{
        //否则就传入一个空函数作为回调,这样就可以避免没有传入回调时的报错。
        orginPush.call(this,location,()=>{},()=>{})
      }
    }
    
    VueRouter.prototype.replace = function(location,resolve,reject){
      if(resolve&&reject){
        orginRepalce.call(this,location,resolve,reject)
      }else{
        orginRepalce.call(this,location,()=>{},()=>{})
      }
    }
    

    至于为什么用call()函数方法,而不是直接在原型上改,是因为原型是直接指向window的,我们是想组件实例上改,因此用call()方法来用组件实例上的vueRouter调用window上vueRouter原型上的push或者replace方法来进行修改

    相关文章

      网友评论

          本文标题:重写VueRouter原型上push和replace方法

          本文链接:https://www.haomeiwen.com/subject/uxvtsrtx.html