vue router 报错： Uncaught (in promise) NavigationDuplicate{_name: "NavigationDuplicated"}

解决方案参考博客：https://blog.youkuaiyun.com/weixin_45522694/article/details/99548714
报错解决办法：针对路由跳转相同的地址添加catch捕获一下异常：this.$router.push(’/location’).catch(err => { console.log(err) })
如图：

代码如下：

<template>
    <div class="top-header-container">
        <ul>
            <li :class="{'active':isActive1}" @click="changeRoute(1)">Home</li>
            <li :class="{'active':isActive2}" @click="changeRoute(2)">Search</li>
            <li :class="{'active':isActive3}" @click="changeRoute(3)">Search result</li>
            <li :class="{'active':isActive4}" @click="changeRoute(4)">Website map</li>
            <li :class="{'active':isActive5}" @click="changeRoute(5)">Admin</li>
        </ul>
    </div>
</template>

methods:{
      changeRoute(n) {
        // console.log($route.path)
        if(n==1){
            this.isActive1 = true;
            this.isActive2 = false;
            this.isActive3 = false;
            this.isActive4 = false;
            this.isActive5 = false;
            this.$router.push({name: "Home"}).catch(err => { console.log(err) }) //关键在这儿，加了catch回调
            // this.$router.push('/location').catch(err => { console.log(err) })
        }else if(n==2){
            this.isActive2 = true;
            this.isActive1 = false;
            this.isActive3 = false;
            this.isActive4 = false;
            this.isActive5 = false;
            this.$router.push({name: "Search"}).catch(err => { console.log(err) })
        }else if(n==3){
            this.isActive3 = true;
            this.isActive2 = false;
            this.isActive1 = false;
            this.isActive4 = false;
            this.isActive5 = false;
            this.$router.push({name: "Result"}).catch(err => { console.log(err) })
        }else if(n==4){
            this.isActive4 = true;
            this.isActive2 = false;
            this.isActive3 = false;
            this.isActive1 = false;
            this.isActive5 = false;
            this.$router.push({name: "Map"}).catch(err => { console.log(err) })
        }else if(n==5){
            this.isActive5 = true;
            this.isActive4 = false;
            this.isActive2 = false;
            this.isActive3 = false;
            this.isActive1 = false;
            this.$router.push({name: "Login"}).catch(err => { console.log(err) })
        }
      }
    },

这种办法虽然可行，但是很繁琐，每次调用router的push、replace方法时都需要catch一下，很麻烦。
除了以上这个笨办法，还有一个一劳永逸的办法如下：
在main.js中加上以下代码：

// 解决Vue-Router升级导致的Uncaught (in promise)问题
import Router from 'vue-router'

const originalPush = Router.prototype.push
Router.prototype.push = function push(location, onResolve, onReject) {
  if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject)
  return originalPush.call(this, location).catch(err => err)
}

OK，问题解决~~