Vue.js(v3)路由报错时不改变URL展示错误组件实现方案

核心实现逻辑：移除独立的错误页路由，通过全局响应式错误状态控制组件渲染，错误触发时不执行路由跳转，直接在当前URL路径下替换渲染错误组件。

具体实现步骤 #

• 第一步：定义全局响应式错误标记
  不需要引入额外状态管理库，直接在路由模块定义响应式变量即可：

  // router/index.js
  import { createRouter, createWebHistory } from 'vue-router'
  import { ref } from 'vue'
  // 路由级错误标记
  export const hasRouteError = ref(false)
  
  // 路由配置删掉独立的/error路由，从根源避免用户直接访问
  const router = createRouter({
    history: createWebHistory(),
    routes: [
      { path: '/', component: Index },
      { path: '/something', component: Something },
      // 原/error路由直接删除
      { path: '/:catchAll(.*)', component: NotFound }
    ]
  })
  

• 第二步：改造路由守卫逻辑，捕获错误后不跳转路由
  移除原有router.onError中跳转/error的逻辑，在守卫内直接捕获异常，修改错误标记后正常放行导航，保持URL不变：

  router.beforeEach(async (to, from, next) => {
    // 每次导航触发先重置错误状态
    hasRouteError.value = false
    try {
      // 原有可能抛出异常的前置操作
      await doSomeRiskyAction()
      next()
    } catch (err) {
      // 操作失败标记错误状态，直接放行导航，URL会停留在目标路径
      hasRouteError.value = true
      next()
    }
  })
  
  // 若需要覆盖路由懒加载等内置错误，补充onError逻辑即可，同样不做跳转
  router.onError(() => {
    hasRouteError.value = true
  })
  

• 第三步：改造根组件渲染逻辑
  在根组件（通常是App.vue）中根据错误状态判断渲染内容，错误触发时直接渲染错误组件，不渲染路由匹配的业务组件：

  <!-- App.vue -->
  <template>
    <ErrorPage v-if="hasRouteError" />
    <router-view v-else />
  </template>
  
  <script setup>
  import { hasRouteError } from './router'
  import ErrorPage from './components/ErrorPage.vue'
  </script>
  

方案效果 #

• 无独立错误路由，用户无法通过手动输入地址直接访问错误页
• 错误触发时地址栏URL保持为用户原本要访问的路径，不会跳转到/error
• 每次新导航开始会自动重置错误状态，不会出现错误页残留问题
• 原有404路由逻辑完全不受影响

内容的提问来源于stack exchange，提问作者Adam K Dean