使用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: "درباره ما", }, }, ];
有什么想法会导致我的有子项的管理路线出现错误吗?!! ...................................................... ...................................................... ...................................................... ...................................................... ...................................................... ...................................................... ...................................................... ...................................................... ...................................................... ......
我将“../views/”更改为“/src/views/”,问题解决了。 似乎使用“..”无法进入 src 文件夹!!!! 谢谢@Mohammad Masoudi