Vue 3 中配置 404 路由及懒加载解决方案

在 Vue 3 应用中，处理未找到的路由（即404页面）是一项基本但重要的任务，尤其是在大型应用中，它能确保用户在尝试访问不存在的路径时仍能得到良好的体验。本文将指导你如何在 Vue 3 中配置 404 路由，并利用懒加载技术进一步优化性能。

1. 配置 404 路由

// router/index.ts
import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router';
import NotFound from '@/views/404/NotFound.vue'; // 直接导入，非懒加载示例

const routes: Array<RouteRecordRaw> = [
  {
    path: "/:pathMatch(.*)*",
    redirect:'/404',
  },
  {
    path: "/404",
    name: "NotFound",
    component: () => import("@/views/404/NotFound.vue"),
  },
];

const router = createRouter({
  // 配置history模式
  history: createWebHashHistory(),
  routes,
});

export default router;

 2.测试

最后，测试你的 404 页面配置。尝试访问一些不存在的 URL，确认 404 页面能够正确显示，并且懒加载功能正常工作。

3.错误写法

在 Vue Router 中，每个路由记录必须有唯一的 name 属性。当你定义了多个具有相同 name 的路由时，Vue Router 会抛出错误，因为它无法确定在导航时应该使用哪个路由。name 的主要用途是在 router-link 组件中或调用 router.push()、router.replace() 等方法时，作为目标路由的标识。

（开发过程的坑记录一下 😆😆😆）

  {
    path: "/:pathMatch(.*)*",
    name: "NotFound",
    redirect: "/404",
  },
  {
    path: "/404",
    name: "NotFound",
    component: () => import("@/views/404/NotFound.vue"),
  },