I am currently working on implementing Domain-Driven Design (DDD) to Vue, and the project structure looks like this:
src
- App
- ...
- router
- index.ts
- Dashboard
- ...
- router
- index.ts
- ...
The goal is for src/App/router/index.ts to populate all routes under src//router/index.ts. Here is the content of the main router file:
//src/App/router/index.ts
import { createRouter, createWebHistory, type RouteRecordRaw } from "vue-router";
const importedRoutes = import.meta.glob<Object>("@/**/router/index.ts", { import: 'default' });
const routes: Array<RouteRecordRaw> = [];
for (const modules in importedRoutes) {
importedRoutes[modules]().then((route: any) => {
routes.push(route);
});
}
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: routes
});
console.log(router.getRoutes());
export default router;
And here is the content of src/Dashboard/router/index.ts:
//src/Dashboard/router/index.ts
import DashboardView from "@/Dashboard/DashboardView.vue";
const routes = {
name: "dashboard",
path: "/",
component: DashboardView,
}
export default routes;
The issue I'm experiencing (as I am still learning TypeScript, please be patient with me) is that no routes are being generated even though I have pushed the objects into routes, and there are no error messages being displayed. The console only shows a warning stating:
[Vue Router warn]: No match found for location with path "/"If you could guide me in the right direction, I would greatly appreciate it. Thank you!