route module merge

src/main.ts

@@ -1,13 +1,10 @@
 import { createApp } from 'vue';
 import App from './app.vue';
-import { router } from './route';
 import 'tailwindcss/tailwind.css';
 import './style/index.less';
 
 const app = createApp(App);
 
 Object.values(import.meta.globEager('./modules/*.ts')).forEach((i) => i.install?.(app));
 
-app.use(router);
-
 app.mount('#app');

src/modules/router.ts

@@ -0,0 +1,55 @@
+import {
+  createRouter,
+  createWebHistory,
+  NavigationGuardWithThis,
+  RouteRecordRaw,
+} from 'vue-router';
+import '@varlet/ui/es/snackbar/style';
+import { type App } from 'vue';
+import Layout from '~/layout/index.vue';
+
+declare module 'vue-router' {
+  interface RouteMeta {
+    appBar?: boolean;
+    tabBar?: boolean;
+    batTitle?: string;
+    authorization?: boolean;
+  }
+}
+
+const routes: RouteRecordRaw[] = [
+  {
+    name: 'Layout',
+    path: '/',
+    component: Layout,
+    redirect: 'about',
+    children: [
+      {
+        name: 'Home',
+        path: 'home',
+        component: () => import('~/views/home/index.vue'),
+      },
+      {
+        name: 'About',
+        path: 'about',
+        component: () => import('~/views/about/index.vue'),
+      },
+    ],
+  },
+];
+
+const beforeEach: NavigationGuardWithThis<undefined> = (to, from, next) => {
+  next();
+};
+
+export { routes };
+
+export const install = (app: App<Element>) => {
+  const router = createRouter({
+    routes,
+    history: createWebHistory(),
+  });
+  router.beforeEach(beforeEach);
+
+  app.use(router);
+};

vite.config.ts

@@ -41,7 +41,7 @@ export default defineConfig({
     }),
     Icons({
       scale: 1,
-      defaultStyle: 'display:inline-block', // Style apply to icons
+      defaultStyle: 'display:inline', // Style apply to icons
       defaultClass: 'icon', // Class names apply to icons
       autoInstall: true,
       compiler: 'vue3',