When utilizing Vue3, Vuerouter4, and Vite
I am attempting to import components and routes into the vue router, but I am encountering an error (only for the route that contains children in my paths):
https://i.sstatic.net/TFGvr.png
This is my router code:
import { createRouter, createWebHistory } from "vue-router";
import paths from "./path";
import { TokenService } from "@/services/storage.services.js";
// Function to define routes
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),
};
// Handle child routes
if (children && Array.isArray(children)) {
children = children.map((path) => {
path.view = view + "/" + path.view;
return path;
});
currentRoute["children"] = children.map((path) => route(path));
}
// Handle redirects
if (redirect) {
currentRoute["redirect"] = redirect;
}
return currentRoute;
}
// Create a new router instance
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;
The paths defined in paths.js:
export default [
{
path: "/admin",
name: "Admin",
view: "Admin",
redirect: "Admin/Home",
// Nested child routes
children: [
{
path: "Home",
name: "Home",
view: "Home",
meta: {
auth: true,
title: "Dashboard",
},
},
// Other nested routes...
],
},
// Additional paths...
];
Any insights on what could be causing the error specifically for the admin route with children?