登录  /  注册
动态导入未知变量:Vue3-vue-router4中的../views/Admin/Home.vue
P粉376738875
P粉376738875 2023-11-23 16:04:29
[Vue.js讨论组]

使用Vue3-Vuerouter4-Vite

我尝试在 vue router 中导入组件和路由,但遇到此错误(仅适用于路径中有子项的路由):

我的路由器代码:

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;

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

有什么想法会导致我的有子项的管理路线出现错误吗?!! ...................................................... ...................................................... ...................................................... ...................................................... ...................................................... ...................................................... ...................................................... ...................................................... ...................................................... ......

P粉376738875
P粉376738875

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 //m.sbmmt.com/ All Rights Reserved | php.cn | 湘ICP备2023035733号