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"),
},总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Vue 和 Django 实现 Token 身份验证 ,Vue.js 和 Django 编写的前后端项目中，实现了基于 Token 的身份验证机制，其他前后端框架的 Token 实现原理与本文一致，需要的朋友可以参考下2022-08-08
这篇文章主要给大家介绍了关于vue3时间插件之Moment.js使用的相关资料,需要的朋友可以参考下2023-09-09
这篇文章主要介绍了3分钟了解vue数据劫持的原理实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
这篇文章主要介绍了Vue 3.0 中 jsx 语法使用，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下2020-11-11
本文主要介绍了基于vue-router的matched实现面包屑功能，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
这篇文章主要为大家详细解析了vue.js数据双向绑定原理，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-03-03
最近在项目中需要对数据进行可视化处理,而众所周知echarts是非常强大的插件,下面这篇文章主要给大家介绍了关于Vue使用echarts的完整步骤及解决各种报错的相关资料,需要的朋友可以参考下2022-05-05
这篇文章主要介绍了VUE搭建分布式医疗挂号系统的前台预约挂号步骤详情，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-04-04
这篇文章主要介绍了详解Vue2.x-directive的学习笔记，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
本篇博客将详细介绍如何在使用 Vue 以及 Element UI 时,实现一个具有左右滑动效果的 tab 切换动画,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习吧2024-03-03
最新评论