Dynamically import unknown variables: ../views/Admin/Home.vue in Vue3-vue-router4

Question

Use Vue3-Vuerouter4-Vite

I tried to import components and routes in vue router but got this error (Only applies to routes with children in the path):

My router code:

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;

My paths in 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: "درباره ما",
        },
      },
    ];

Any ideas what could be causing the error for my admin route that has children? ! ! ................................................................. ........................................................ ........................................................................ ........................................................ ........................................................ .................................................................. ........................................................................ ........................................................ ............................................................ .....................................................

Answer 1

I changed "../views/" to "/src/views/" and the problem was solved. It seems you can't get into the src folder using ".."! ! ! ! Thank you @Mohammad Masoudi