vue-router重写push方法,解决相同路径跳转报错问题

在 Vue.js 路由中使用 router.push 方法进行路由导航时，如果跳转的路径和当前路径相同，则会直接报错。为了解决这个问题，我们可以重写 router.push 方法，使其能够处理相同路径跳转的情况。

重写 router.push 方法的具体步骤如下：

1. 手动创建一个新的 push 方法
2. 在新的 push 方法中判断跳转路径是否和当前路径相同
3. 如果相同，则不使用 router.push 方法进行跳转，而是手动触发路由更新
4. 如果不相同，则使用原生的 router.push 方法进行跳转

以下是具体的代码示例：

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

const router = new Router({
  routes: [
    // 路由配置
  ]
})

// 重写 push 方法
const routerPush = router.push
router.push = function(location) {
  return routerPush.call(this, location).catch(error => error)
}

export default router

第一行导入 Vue 和 Router，并使用 Vue.use 方法注册路由插件。接下来创建一个新的 Router 并配置路由路径。

然后，我们重写 push 方法。首先将原始的 router.push 方法保存到 routerPush 变量中。然后，我们创建一个新的 push 方法来替换原始的 router.push 方法。

在新的 push 方法中，我们首先调用 routerPush 方法进行路由跳转。由于在某些情况下在相同路径的情况下，routerPush 方法会抛出一个错误，因此我们需要在调用 routerPush 方法之后添加一个 catch 处理程序来捕获错误并防止它们向上抛出。

最后，将新的 push 方法赋值回 router 对象中。

接下来是两个示例，分别是在组件和非组件中使用 router.push 方法。

组件中使用：

<template>
  <div>
    <h1>My Component</h1>
    <button @click="goToHome()">Go to Home</button>
  </div>
</template>

<script>
export default {
  methods: {
    goToHome() {
      this.$router.push('/')
    }
  }
}
</script>

在组件中，我们可以像以前一样使用 $router.push 方法进行路由跳转，重写的 push 方法将自动处理相同路径的情况。

非组件中使用：

import router from '@/router'

function goToHome() {
  router.push('/')
}

在非组件中，我们需要导入 router 并使用 router.push 方法进行路由跳转。由于我们已经重写了 push 方法，操作方式和以前一样，重写 push 方法将自动处理相同路径的情况。