NavigationDuplicated: Avoided redundant navigation to current location: “xxxx.vue“问题

当目标跳转的路径路径和当前路由页面路径一致的时候，重复点击浏览器就会报出这个错误

 

 解决方法一：

 在main.js 中 

// 导入 vue-router 模块
import VueRouter from 'vue-router'
Vue.use(VueRouter)

const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
// 调用回调方法 让浏览器不再报出这个错误
  return originalPush.call(this, location).catch(err => err)
}

解决方法二：

在出错的组件中，判断一下当前页面是否和目标路径一样，当一致的时候将不执行任何操作

html中的结构

 <div class="a-tabber">
        <div class="a-tabber-item" @click="commandSelected(options[0])">
            <span :class="{selectedStyle:selected==options[0]}">探索</span> 
        </div>
        <div class="a-tabber-item" @click="commandSelected(options[1])">
            <span :class="{selectedStyle:selected==options[1]}">心愿单</span>
        </div>
        <div class="a-tabber-item" @click="commandSelected(options[2])">
            <span :class="{selectedStyle:selected==options[2]}">目的地</span>
        </div>
        <div class="a-tabber-item" @click="commandSelected(options[3])">
            <span :class="{selectedStyle:selected==options[3]}">收件箱</span>
        </div>
        <div class="a-tabber-item" @click="commandSelected(options[4])">
            <span :class="{selectedStyle:selected==options[4]}">我的</span>
        </div>
    </div>

data中记录的数据:

data() {
    return {
      options: ["explore", "wishList", "destination", "inbox", "my"],
      selected: "explore",
    };
  },

具体方法实现如下:

commandSelected: function(optionStr) {
        if(this.selected != optionStr){
            // 判断 当前页面 和 用户选择跳转的是否一致，只有不相等的时候 才会执行以下操作
            this.selected = optionStr;
            // 跳转到数组中字符串记录的对应的路由
            this.$router.push('/homepage/' + optionStr)
        }
        else{
            // 如果当前的页面和目标跳转页面一致的话 就不执行任何操作
        }
    },