vue-router 使用name跳转时，404失效的问题

最新推荐文章于 2025-09-18 19:52:49 发布

原创最新推荐文章于 2025-09-18 19:52:49 发布 · 4.9k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

javascript进阶专栏收录该内容

6 篇文章

订阅专栏

博客讲述了在Vue Router中使用name属性进行跳转时，如果路由表中不存在对应的name，不会自动跳转到404错误页面。作者提出了常见解决方案的不足，并分享了一个自定义的监听warn方法，通过捕获特定警告信息来实现当name跳转失败时，自动重定向到404页面，从而避免空白页的出现。这种方法在不修改源码的情况下提供了一个较好的解决方案。

使用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)
}

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