Importer dynamiquement des variables inconnues : ../views/Admin/Home.vue dans Vue3-vue-router4

Question

Utilisation de Vue3-Vuerouter4-Vite

J'ai essayé d'importer des composants et des routes dans vue router mais j'ai eu cette erreur (ne fonctionne que pour les routes avec des enfants dans le chemin) :

Mon code de routeur :

import { createRouter, createWebHistory } from "vue-router";
import paths from "./path";
import { TokenService } from "@/services/storage.services.js";


function route(options) {
  let path = options.path;
  let view = options.view;
  let name = options.name;
  let meta = options.meta ? options.meta : "";
  let children = options.children ? options.children : null;
  let redirect = options.redirect ? options.redirect : null;
  let currentRoute = {
    name: name || view,
    path,
    meta,
    component: (resolve) => import(`@/views/${view}.vue`).then(resolve),
  };
  if (children && Array.isArray(children)) {
    children = children.map((path) => {
      path.view = view + "/" + path.view;
      return path;
    });
    currentRoute["children"] = children.map((path) => route(path));
  }
  if (redirect) {
    currentRoute["redirect"] = redirect;
  }
  return currentRoute;
}

// Create a new router
const router = createRouter({
  history: createWebHistory(),
  routes: paths
    .map((path) => route(path))
    .concat([{ path: "/:pathMatch(.*)", redirect: "admin/home" }]),
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition;
    }
    if (to.hash) {
      return { selector: to.hash };
    }
    return { left: 0, top: 0 };
  },
});

export default router;

Mes chemins dans

paths.js :

export default [
      {
        path: "/admin",
        name: "Admin",
        view: "Admin",
        redirect: "Admin/Home",
        children: [
          {
            path: "Home",
            name: "Home",
            view: "Home",
            meta: {
              auth: true,
              title: "داشبورد",
            },
          },
          {
            path: "TRANSACTION",
            name: "TRANSACTION",
            view: "Transaction",
            meta: {
              auth: true,
              title: "تراکنش ها",
            },
          },
          {
            path: "SMS-MANAGEMENT",
            name: "SMSManagement",
            view: "SMSManagement",
            meta: {
              auth: true,
              title: "مدیریت پیامک ها",
            },
          },
          {
            path: "CAR-LIST",
            name: "CAR-LIST",
            view: "Car-List",
            meta: {
              auth: true,
              title: "لیست خودرو های اجاره ای",
            },
          },
          {
            path: "ADDRENTCAR",
            name: "ADDRENTCAR",
            view: "AddRentCar",
            meta: {
              auth: false,
              title: "افزودن خودرو اجاره ای",
            },
          },
          {
            path: "EDITRENTCAR",
            name: "EDITRENTCAR",
            view: "AddRentCar",
            meta: {
              auth: false,
              title: "ویرایش خودرو اجاره ای",
            },
          },
          {
            path: "USERS",
            name: "USERS",
            view: "Users",
            meta: {
              auth: true,
              title: "لیست کاربران",
            },
          },
          {
            path: "CARS",
            name: "CARS",
            view: "Cars",
            meta: {
              auth: true,
              title: "لیست خودرو ها",
            },
          },
          {
            path: "REQUESTS",
            name: "REQUESTS",
            view: "REQUESTS",
            meta: {
              auth: true,
              title: "لیست درخواست ها",
            },
          },
        ],
      },
      {
        path: "",
        name: "MAIN-HOME",
        view: "main-home",
        meta: {
          auth: true,
          title: "صفحه اصلی",
          public: true,
        },
      },
      {
        path: "/PROFILE",
        name: "PROFILE",
        view: "PROFILE",
        meta: {
          auth: true,
          title: "پروفایل من",
        },
      },
      {
        path: "/LOGIN",
        name: "LOGIN",
        view: "Login",
        meta: {
          auth: true,
          title: "ورود",
        },
      },
      {
        path: "/ALLCARS",
        name: "ALLCARS",
        view: "ALLCARS",
        meta: {
          public: true,
          auth: true,
          title: "لیست تمام خودرو ها",
        },
      },
      {
        path: "/ABOUTUS",
        name: "ABOUTUS",
        view: "ABOUTUS",
        meta: {
          public: true,
          auth: true,
          title: "درباره ما",
        },
      },
    ];

Avez-vous une idée de ce qui pourrait causer l'erreur sur ma route d'administration qui a des enfants ? ! ! .................................................................. ............... .................................... ....................................................... ...................................................... ....... .................................................................. . .................................................................. ..................................................... ....................................................... ...................................................... ....... .................................................................. . .................................................................. ........................................................ .........

Answer 1

J'ai changé "../views/" en "/src/views/" et le problème a été résolu. Il semble que vous ne puissiez pas accéder au dossier src en utilisant ".." ! ! ! ! Merci @Mohammad Masoudi