美文网首页💚💚VUE 💚💚
vue路由跳转报错Avoided redundant navig

vue路由跳转报错Avoided redundant navig

作者: Shiyouzhang | 来源:发表于2021-04-16 09:26 被阅读0次

    vue路由跳转报错Avoided redundant navigation to current location: “/xxxxxx“.

    一、原因

    • 在使用this.$router.push进行路由的跳转时,出现如下报错:
      image
    • 原因:重复路由跳转,
      比如说当前路由是商品详情页面/detail
      但是点击按钮进行this.$router.push操作,
      要跳转的还是详情页面/detail

    二、解决报错

    1. 升级vue-router版本为3.0即可解决,项目目录下运行命令:
    2. 修改VueRouter原型对象上的push方法,在router文件夹下的index.js中加入如下代码:
    //获取原型对象上的push函数
    const originalPush = VueRouter.prototype.push
    //修改原型对象中的push方法
    VueRouter.prototype.push = function push(location) {
      return originalPush.call(this, location).catch(err => err)
    }
    
    
    image

    三、原理

    原理解析

    1. location 这个location
      就是一个保存了当前要跳转路径的对象;
    1. call的使用 call()函数可以在调用函数的同时,
      来改变this的指向,常用于实现继承。
      第一个参数this
      由于call处于原型对象内部,
      所以此处this指向的是当前VueRouter的实例对象。
      originalPush指向的是
      VueRouter.prototype.push
      旨在于调用当前VueRouter实例对象中的push方法。
      第二个参数location
      在方法调用时传入获取到的location
    1. catch
      链式调用catch方法。
      旨在在方法执行时,捕获错误。
      在js机制中,catch捕获到Exception时,
      代码还会继续向下执行。所以此处的catch未作任何操作,
      代码也会继续向下执行。
      和抛给浏览器的错误其实时一致的:

    相关文章

      网友评论

        本文标题:vue路由跳转报错Avoided redundant navig

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