Vue路由重复跳转报错

给一个元素绑定跳转路由的事件时，跳转后当我们重复点击时就会报以下错误：

原因：vueRouter版本问题，

解决方案1:

使用旧版本的VueRouter 3.0.xxx

解决方案2:

跳转路径后，捕获异常，不做处理(这类绑定事件若较多，要写好多次catch)

$router.push('/home/search').catch(err=>{ })

解决方案3(推荐):

在VueRouter上配置路由跳转，在router中的index.js中加上以下代码，注意加在use之前

const routerPush = VueRouter.prototype.push;

VueRouter.prototype.push = function (location) { return routerPush.call(this, location).catch(err => {})

};

完整示例：

import VueRouter from 'vue-router'
import infoView from '../view/infoView.vue'
import HomeView from '../components/HomeView.vue'
import theSearch from '../view/theSearch.vue'
 
const routerPush = VueRouter.prototype.push;
VueRouter.prototype.push = function (location) {
    return routerPush.call(this, location).catch(err => {})
};
Vue.use(VueRouter)
const routes = [{
    path: '/',
    redirect: '/home'
}, {
    path: '/home',
    component: HomeView,
    children: [{
        path: '/home/info',
        component: infoView
    }, {
        path: '/home/search',
        component: theSearch
    }, ]
}, ]
 
const router = new VueRouter({
    routes
})
 
export default router