Vue-router不允许导航到当前位置(/path)错误原因以及修复方式

当我们使用 Vue-router 进行路由导航时，如果我们尝试导航到当前位置，就会出现错误提示：“NavigationDuplicated: Avoided redundant navigation to current location: "/path"”。

这个错误的原因是因为 Vue-router 认为我们已经在当前的路由路径中了，所以再次尝试导航到相同的路径就是无用的，并且可能导致页面绑定的数据重新加载或者触发一些其他的副作用。

为了避免这个错误的出现，我们可以通过以下两种方式进行修复：

1. 使用replace方法

我们可以使用 Vue-router 提供的 replace 方法来进行路由导航，这样就可以避免出现“导航到当前位置”的错误提示。replace 方法和 push 方法非常相似，只是会把当前的路由记录替换掉。

示例代码：

// 在Vue组件内部使用
this.$router.replace('/path')

// 在Vue实例内部使用
Vue.router.replace('/path')

2. 使用catchError方法

在 Vue-router 3.x 中，我们可以使用 catchError 方法来捕捉所有的错误，包括“导航到当前位置”的错误。这样我们就可以在控制台或者页面内展示自定义的错误信息，方便用户理解。

示例代码：

const router = new VueRouter({
  routes
})

router.onError(error => {
  if (error.name === 'NavigationDuplicated') {
    console.log('捕捉到NavigationDuplicated错误')
    // 展示自定义的错误提示
    // ...
  }
})

通过使用上述两种方法之一，我们就可以避免 Vue-router 抛出“导航到当前位置”的错误提示，并且为用户提供更友好的错误信息。