Vue3中配置404路由及懒加载的解决过程
作者：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"),
},总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。