Vuejs 在 vue router 中添加 transition 后停止渲染组件

Question

Vuejs 在我检查错误时在我的仪表板布局的子路径中添加了一个转换后停止渲染组件没有错误也没有警告但是每当我重新加载页面时组件渲染，并且相同的功能在同一个应用程序中工作在我的登录布局中，当我进入网络时，子路由出现 304 HTTP 错误
这是我的索引路由器

import { createRouter, createWebHistory } from "vue-router";
// importing Dashboard routes
import DashboardRoutes from "./Dashboard/index.js";
import store from "@/store/store.js";

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: "/",
      // redirecting the root to the login welcome page
      redirect: { name: "login" },
    },
    {
      // creating a group path for all the login pages
      path: "/login",
      name: "login",
      redirect: { name: "welcome" },
      component: () => import("../components/Pages/Login/LoginMain.vue"),
      //checking the condition if user is logged in or not and redirecting
      beforeEnter: (_, _2, next) => {
        if (store.state.login.isLoggedIn) {
          next("/dashboard");
        } else {
          next();
        }
      },
      children: [
        {
          path: "/welcome",
          name: "welcome",
          component: () =>
            import("../components/Pages/Login/Childrens/WelCome.vue"),
        },
        {
          path: "/austria-login",
          name: "austria-login",
          component: () =>
            import("../components/Pages/Login/Childrens/AustriaLogin.vue"),
        },
        {
          path: "/sms-login",
          name: "sms-login",
          component: () =>
            import("../components/Pages/Login/Childrens/SmsLogin.vue"),
        },
        {
          path: "/enter-tpn",
          name: "enter-tpn",
          component: () =>
            import("../components/Pages/Login/Childrens/EnterTpn.vue"),
            //chcking the condition of phone and social security token is entered
          beforeEnter: (_, _2, next) => {
            if (!store.state.login.phoneVerified) {
              next("/sms-login");
            } else {
              next();
            }
          },
        },
      ],
    },
    // using Dashboard Routes
    ...DashboardRoutes,
  ],
  scrollBehavior(_, _2, savedPosition) {
    if (savedPosition) {
      window.scrollTo(savedPosition);
    } else {
      window.scrollTo(0, 0);
    }
  },
});

export default router;

这是我的仪表板儿童路线

import AppointmentRoutes from "./Appointment"; // importing appointment children routes
import SettingRoutes from "./Setting";
import store from "@/store/store";
const DashboardRoutes = [
  {
    // router group for all the dashboard views
    path: "/dashboardMain",
    name: "dashboardMain",
    component: () => import("../../components/Pages/DashBoard/IndexMain.vue"),
    beforeEnter: (_, _2, next) => {
      if (store.state.login.isLoggedIn) {
        next();
      } else {
        next('/login');
      }
    },
    children: [
      {
        path: "/dashboard",
        name: "dashboard",
        component: () =>
          import("../../components/Pages/DashBoard/Home/DashBoard.vue"),
        props: { sidebar: true },
      },
      // router for appointments
      {
        path: "/appointments",
        name: "PatientAppoinetments",
        redirect: { name: "PatientAppointmentsData" },
        component: () =>
          import(
            "../../components/Pages/DashBoard/PatientAppointment/PatientAppointment.vue"
          ),
        props: { sidebar: true },
        // children group for appointments components
        children: [...AppointmentRoutes],
      },
      {
        path: "/requests",
        name: "Requests",
        component: () =>
          import(
            "../../components/Pages/DashBoard/PatientRequests/PatientRequest.vue"
          ),
      },
      {
        path: "/medications",
        name: "Medications",
        component: () =>
          import(
            "../../components/Pages/DashBoard/PatientMedication/PatientMedication.vue"
          ),
      },

      {
        path: "/questions",
        name: "Questions",
        component: () =>
          import(
            "../../components/Pages/DashBoard/PatientQuestionaries/PatientQuestionaries.vue"
          ),
      },

      {
        path: "/health-status",
        name: "HealthStatus",
        component: () =>
          import(
            "../../components/Pages/DashBoard/PatientHealth/PatientHealth.vue"
          ),
      },
      {
        path: "/diagnostic-center",
        name: "PatientDiagnosticCenter",
        component: () =>
          import(
            "../../components/Pages/DashBoard/PatientDiagnostic/PatientDiagnosticCenter.vue"
          ),
      },
      {
        path: "/vaccination",
        name: "PatientVaccination",
        component: () =>
          import(
            "../../components/Pages/DashBoard/PatientVaccination/PatientVaccination.vue"
          ),
      },
      {
        path: "/setting",
        name: "Setting",
        redirect: { name: "AccountSetting" },
        component: () =>
          import("@/components/Pages/DashBoard/Setting/SettingIndex.vue"),
        children: [...SettingRoutes],
      },
      {
        path: "/chat",
        name: "PatientChat",
        redirect: { path: "/chat/gautam" },
        component: () =>
          import(
            "../../components/Pages/DashBoard/PatientChat/PatientChat.vue"
          ),
        // children group for chat page
        children: [
          {
            path: "/chat/:name",
            name: "chatMessages",
            component: () =>
              import(
                "../../components/Pages/DashBoard/PatientChat/Children/PatientChatmessages.vue"
              ),
          },
        ],
      },
      {
        path: "/access-log",
        name: "AccessLog",
        component: () =>
          import("@/components/Pages/DashBoard/AccessLog/AccessLog.vue"),
      },
      {
        path: "/my-profile",
        name: "MyProfile",
        component: () =>
          import("@/components/Pages/DashBoard/MyProfile/MyProfile.vue"),
        props: { sidebar: true },
      },
    ],
  },
];

export default DashboardRoutes;

这是 DahboardMain，我想在其中呈现我的仪表板子页面
但是当我要去页面重新加载以外的任何路线时，我得到黑屏儿童区域的空白

我试图从路由中删除 beforeEnter 守卫，我还从仪表板布局中删除了除路由器视图之外的所有代码，但仍然出现黑屏

这是空白屏幕的图像

这是在网络上显示