路由中 404页面全屏展示问题

原创已于 2023-03-28 18:34:05 修改 · 295 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2023-02-03 13:31:55 首次发布

解决问题记录专栏收录该内容

7 篇文章

订阅专栏

文章讲述了在开发中遇到的问题，即未匹配的路由直接跳转到全屏404页面，影响用户体验。作者发现原因是404页面缺少Layout布局。为了解决这个问题，作者修改了路由配置，引入了Layout组件，并通过redirect重定向到包含Layout的404页面，从而改善了显示效果。

最近写动态路由，会放置404的页面，给未匹配的路由一个页面
但是发现，路由未匹配时，会直接从当前系统跳到一个全屏的404页面，很不美观
这是由于没有给404页面 Latout布局导致的，记录一下
原写法：
在这里插入图片描述

{
    path: "/:pathMatch(.*)*",
    name: "not-found",
    component: () => import("@/views/noFound.vue"),
    meta: {
      title: "未找到",
      hidden: true,
    },
 },

改后写法
在这里插入图片描述

{
    path: "/:pathMatch(.*)*",
    component: Layout,
    redirect: "/notFound",
    meta: {
      title: "未找到",
      icon: "el-icon-s-home",
      hidden: true,
      
    },
    children: [
      {
        path: "/notFound",
        name: "notFound404",
        component: () => import("@/views/noFound.vue"),
        meta: {
          title: "未找到",
          icon: "home",
          hidden: true,
        },
      },
    ],
  },