脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue3中配置404路由及懒加载

Vue3中配置404路由及懒加载的解决过程

 更新时间：2025年04月03日 10:16:22   作者：Roco Ethan  
这篇文章主要介绍了Vue3中配置404路由及懒加载的解决过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

Vue3中配置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"),
  },

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

最新评论