Проблемные маршруты в приложении Vue не отображаются должным образом

Question

У меня есть приложение Vue 3 и в моем маршрутизаторе есть вложенные маршруты, однако у меня возникают проблемы с некоторыми из этих маршрутов, как только я хочу вызвать их явно через соответствующий URL-адрес или перезагрузить страницу с помощью F5.

Как только я это сделаю, компоненты, которые у меня есть в моем App.vue, например панель навигации, отображаются дважды, трижды или даже четыре раза и <router-view>для отображения содержимого страницы полностью исчезло.

Я отметил 3 проблемных маршрута в коде с помощью // [problematic].

      // Router - index.ts

import pinia from "@/store";
import { useProcessStore } from "@/store/process";
import { useUserStore } from "@/store/user";
import { createRouter, createWebHistory, RouteRecordRaw, RouterOptions } from "vue-router";

function loadView (view, subFolder = "") {
  // route level code-splitting: which is lazy-loaded when the route is visited.
  return () => import("../views/" + subFolder + view + ".vue");
}

async function checkLogin () {
  const userStore = useUserStore(pinia);
  await userStore.checkLogin();
}

const routes: Array<RouteRecordRaw> = [
  {
    path: "/",
    redirect: { name: "Cockpit" },
    beforeEnter: async () => {
      await checkLogin();
      return ;
    }
  },
  {
    path: "/cockpit",
    name: "Cockpit",
    component: loadView("Cockpit"),
    beforeEnter: async () => {
      await checkLogin();
      return true;
    }
  },
  {
    path: "/processes",
    name: "Processes",
    component: loadView("Processes", "processes/"),
    beforeEnter: async () => {
      await checkLogin();
      return true;
    }
  },
  {
    path: "/processes/new",
    name: "ProcessNew",
    component: loadView("ProcessNew", "processes/"),
    beforeEnter: async () => {
      await checkLogin();
      return true;
    }
  },
  {
    path: "/processes/:id", // [problematic]
    name: "ProcessView",
    component: loadView("ProcessView", "processes/"),
    beforeEnter: async (to) => {
      await checkLogin();
      const processStore = useProcessStore(pinia);
      processStore.$reset();
      await processStore.readProcess(to.params.id);
      return true;
    },
    children: [
      {
        path: "steer", // [problematic]
        name: "ProcessSteer",
        component: loadView("ProcessSteer", "processes/"),
        beforeEnter: async (to) => {
          const processStore = useProcessStore(pinia);
          if (processStore.process_status !== "in_control") {
            return { name: "ProcessView", params: { id: to.params.id } };
          }
          return true;
        }
      },
      {
        path: "approve/:code", // [problematic]
        name: "ProcessApprove",
        component: loadView("ProcessApproval", "processes/"),
        beforeEnter: async (to) => {
          const processStore = useProcessStore(pinia);
          if (processStore.process_status !== "in_approval" && !processStore.checkApprovalCode(to.params.code)) {
            return { name: "ProcessView", params: { id: to.params.id } };
          }
          return true;
        }
      }
    ]
  },
  {
    path: "/admin",
    name: "Admin",
    component: loadView("Admin"),
    beforeEnter: async () => {
      await checkLogin();
      // TODO: check admin status
      return true;
    },
    children: [
      {
        path: "users",
        name: "Users",
        component: loadView("Users"),
        beforeEnter: async () => {
          await checkLogin();
          console.log("test");
          return true;
        }
      },
      {
        path: "analysis",
        name: "Analysis",
        component: loadView("Analysis")
      },
    ]
  },
  {
    path: "/settings",
    name: "Settings",
    component: loadView("Settings"),
    beforeEnter: async () => {
      await checkLogin();
      return true;
    }
  },
  {
    path: "/error",
    name: "Error",
    component: loadView("Error"),
    props: true
  },
  {
    path: "/:catchAll(.*)",
    redirect: { name: "Error" }
  }
];

const router = createRouter(<RouterOptions>{
  history: createWebHistory(import.meta.env.BASE_URL),
  routes
});

export default router;