关于Vue使用name跳转无法触发404页面的问题

我们都知道，vue-router中设置了404页面之后，使用path跳转不存在的路由会重定向到404页面，但是使用Name做路由跳转，跳转一个并不存在的路由，就不会触发404页面。

原因是vue-router没有对这种情况做什么处理：只是简单的在控制台抛出警告

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

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

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

利用vue-router会在跳转不存在name路由时会在控制台抛出警告的原理。

所以我使用了第三种方式：监听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)
}

本文章借鉴“天空之蓝砖”，原文地址：vue-router 使用name跳转时，404失效的问题_huangssssx的专栏-CSDN博客

仅用作自己收藏方便查找，侵删(*^▽^*)~