使用name跳转的时候，如果路由表中没有找到对应的name的时候，并不会跳转到404页面，例如下面的代码：

    gotoUserCenter() {
      this.$router.push({ name: 'userCenterPage' })
    },

当name：“userCenterPage”不存在于路由表中时就会跳转到一个空白页面，而并不会跳转到404页面，其实是因为vue-router没有对这种情况做什么处理：

当前网上的应对方案是1. 不使用name来跳转 2. 在守卫处判断to.matched.length

方法1限制了我们书写代码的规则，减少了我们传参的方式不可取

方法2则在很多场合会误判，比如在刚登录的时候to.matched.length是空的。

所以我使用了第三种方式：监听warn：

import router from '@/router'
const sourceWarn = window.console.warn
// 复写warn方法方便检查由于使用name跳转无法监控404的问题
window.console.warn = function (...rest) {
  const args = Array.from(rest)
  if (args[0] && args[0].includes('Route with name') && args[0].includes('does not exist')) {
    console.log('预备跳转404')
    setTimeout(() => {
      router.push('/404')
    }, 0)
  }
  sourceWarn(...rest)
}

在不改动源码的情况下比较完美的解决了这个问题