Vue Router的NavigationDuplicated错误

• 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)
  })
}