Vue前端配置路由通配捕获 404

Vue前端配置路由通配捕获 404

重点：你的项目使用动态路由 addRoute 加载菜单，通配 404 不能写在 constantRoutes 数组里面，写进去会出现：登录后跳转直接 404 的经典 bug。

① 修改 src/router/index.js

import { createRouter, createWebHistory } from 'vue-router'

// 常量路由，所有人都能访问
export const constantRoutes = [
  {
    path: '/',
    redirect: '/login'
  },
  {
    path: '/login',
    component: () => import('@/views/login/index.vue')
  },
  {
    path: '/404',
    component: () => import('@/views/error/404.vue')
  },
  {
    path: '/500',
    component: () => import('@/views/error/500.vue')
  }
]

// 异步路由，权限菜单，后续addRoute动态添加
export const asyncRoutes = [
  // dashboard、用户管理等业务路由
]

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: constantRoutes
})

// ⚠️ 删掉这里！不要在这里写  path:'/:pathMatch(.*)*'

export default router

② 在获取权限、循环 addRoute 动态路由完成之后，追加 404 通配路由

一般写在 pinia userStore，登录成功，拿到后端返回菜单，处理完 asyncRoutes 循环 addRoute 之后。

示例代码（user store 内部）

// 1. 拿到后端菜单，生成路由数组
const accessRoutes = generateRoutes(menus)

// 2.循环添加业务动态路由
accessRoutes.forEach(route => {
  router.addRoute(route)
})

// ✅【关键】所有动态路由添加完毕，**最后一步**追加404捕获路由
router.addRoute({
  path: '/:pathMatch(.*)*',
  redirect: '/404'
})

逻辑顺序一定要记牢

1. 登录成功
2. 请求后端获取用户菜单权限
3. 把菜单转换成 vue 路由对象
4. 循环 router.addRoute() 添加业务页面路由
5. 最后执行 addRoute 添加 /:pathMatch(.*)* 通配 404

如果顺序颠倒，动态路由还没注册，访问页面直接命中 404 通配，直接跳 404，页面白屏。

测试验证

1. 登录系统，进入首页
2. 浏览器地址栏手动输入一个不存在路径，例如：http://localhost:5173/aaaa1234
3. 自动跳转到 /404，渲染你的 ErrorView 组件页面。

重要补充（history 模式打包上线）

打包后部署 nginx，history 模式必须配置，否则刷新页面服务器返回 404

location / {
  try_files $uri $uri/ /index.html;
}

本地 vite 开发环境不需要配置 nginx。

---

现在我们的路由完整流程

1. /login 登录页面
2. 登录成功，获取菜单，addRoute 加载动态业务路由
3. addRoute 追加 404 通配
4. 访问不存在地址自动跳转 /404