Vue Router的NavigationDuplicated错误

最新推荐文章于 2025-05-30 11:40:16 发布

原创最新推荐文章于 2025-05-30 11:40:16 发布 · 368 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #VueRouter

Html 专栏收录该内容

7 篇文章

订阅专栏

博客主要围绕Vue中NavigationDuplicated错误展开，提到posva高赞回答的解决方案。考虑到开发环境需查看错误信息，给出了一些修改方案，包括自定义开发模式启动语句添加dev模式语句、自定义日志打印及在开发者模式下打印日志。

NavigationDuplicated: Avoided redundant navigation to current location: “/”.
Error: Redirected when going from “" to "” via a navigation guard.

Vue router最近将NavigationDuplicated的错误置顶了，posva的高赞回答提出的解决方案如下：

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) => {
    if (Router.isNavigationFailure(err)) {
      // resolve err
      return err
    }
    // rethrow error
    return Promise.reject(err)
  })
}

但开发环境下需要查看错误信息，因此可以做一些小修改。

1 自定义开发模式启动语句，添加dev模式语句package.json：

{
  "scripts": {
    "dev": "NODE_ENV=development vue-cli-service serve",
  },
}

2 自定义日志打印，创建Log.js：

/**
 * 转换为html的style
 * @param {Object} style 
 */
const styleTranslate = (style) => {
  return Object.entries(style)
    .map(([key, value]) => `${key}:${value}`)
    .join(';')
}
const style = {
  'color': '#FFFFFF',
  'padding': '4px',
  'border-radius': '4px',
}
const STYLE_DEV_ERROR = styleTranslate({
  'background-color': '#FF0000',
  ...style
})
// ...

export default {
  // ...
  /**
   * 如果当前的NODE_ENV是development模式，则向控制台输出错误信息
   *
   * @param {*} callback
   */
  devError(...message) {
    if (process.env.NODE_ENV === 'development') {
      console.error('%cdevError', STYLE_DEV_ERROR, ...message)
    }
  },
}

3 开发者模式下打印日志Log.devError(err)：

import Router from 'vue-router'
import Log from './Log'

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) => {
    Log.devError(err)
    if (Router.isNavigationFailure(err)) {
      // resolve err
      return err
    }
    // rethrow error
    return Promise.reject(err)
  })
}