Nuxt2项目刷新页面触发NavigationDuplicated错误求助

这个错误是Vue Router抛出的冗余导航警告，原因是刷新页面时触发了重复导航到当前路由的操作，以下是几种可行的解决办法：

• 全局捕获并忽略冗余导航错误
  在Nuxt项目的plugins目录下创建router.js文件，写入以下代码：

  export default ({ app }) => {
    const originalPush = app.router.push
    app.router.push = function push(location) {
      return originalPush.call(this, location).catch(err => {
        if (err.name !== 'NavigationDuplicated') throw err
      })
    }
  }
  

  接着在nuxt.config.js的plugins数组中注册该插件：

  plugins: [
    '~/plugins/router.js'
  ]
  

  该方法会全局拦截push方法，仅忽略NavigationDuplicated类型的错误，不影响其他异常的抛出。

• 检查并修正页面内的导航逻辑
  排查页面组件的mounted、asyncData等钩子，确认是否存在重复调用$router.push或nuxt-link触发相同路由的情况。在触发导航前可先判断当前路由是否与目标路由一致：

  if (this.$route.path !== '/haendler-details/1404-distilled-gin') {
    this.$router.push('/haendler-details/1404-distilled-gin')
  }
  

• 使用replace替代push（按需选择）
  如果不需要保留当前路由的历史记录，可以用$router.replace替代$router.push，重复调用时不会触发冗余导航错误：

  this.$router.replace('/haendler-details/1404-distilled-gin')
  

内容的提问来源于stack exchange，提问作者Robert S