1. npm install --save-dev @types/axios @types/vue @types/vue-router

2. create file vue-router.d.ts
2. pinia use my plugin
3. npm i --save-dev @types/cytoscape. npm i --save-dev @types/cytoscape-dagre. npm i --save-dev @types/cytoscape-popper.
4. add apiError.d.ts npm install --save-dev @types/vue-router.
5. add vue-axios.d.ts

src/router/index.ts

@@ -0,0 +1,163 @@
+import { createRouter, createWebHistory, } from "vue-router";
+import AuthContainer from '@/views/AuthContainer.vue';
+import MainContainer from '@/views/MainContainer.vue';
+import Login from '@/views/Login/Login.vue';
+import Files from '@/views/Files/Files.vue';
+import Upload from '@/views/Upload/index.vue';
+import Map from '@/views/Discover/Map/Map.vue';
+import Conformance from '@/views/Discover/Conformance/index.vue';
+import Performance from '@/views/Discover/Performance/index.vue';
+import CompareDashboard from '@/views/Compare/Dashboard/Compare.vue';
+import AccountAdmin from '@/views/AccountManagement/AccountAdmin/AccountAdmin.vue';
+import MemberArea from '@/views/MemberArea/index.vue';
+import NotFound404 from '@/views/NotFound404.vue';
+
+const routes = [
+  {
+    path: '/', // 預設進入路由
+    redirect: '/files',  //重定向
+   },
+  {
+    path: '/',
+    name: "AuthContainer",
+    component: AuthContainer,
+    children: [
+      {
+        path: "/login",
+        name: "Login",
+        component: Login,
+      },
+    ]
+  },
+  {
+    path: "/",
+    name: "MainContainer",
+    component: MainContainer,
+    meta: {
+      title: "MainContainer",
+      requiresAuth: true
+    },
+    children: [
+      {
+        path: "/member-area",
+        name: "MemberArea",
+        component: MemberArea,
+      },
+      {
+        path: "/files",
+        name: "Files",
+        component: Files,
+      },
+      {
+        path: "/account",
+        name: "Account Management",
+        children: [
+          {
+            path: "/account-admin",
+            name: "AcctAdmin",
+            component: AccountAdmin,
+          },
+        ]
+      },
+      {
+        path: "/upload", // router.push({ replace: true }) 路徑不添進歷史紀錄
+        name: "Upload",
+        component: Upload
+      },
+      {
+        path: "/discover",
+        name: "Discover",
+        children: [
+          {
+            // type: log | filter，參數會有以上任一。
+            // fileId: log_id | filter_id，參數會有以上任一。
+            path: "/discover/:type/:fileId/map",
+            name: "Map",
+            component: Map,
+          },
+          {
+            // type: log | filter，參數會有以上任一。
+            // fileId: log_id | filter_id，參數會有以上任一。
+            path: "/discover/:type/:fileId/conformance",
+            name: "Conformance",
+            component: Conformance,
+          },
+          {
+            // type: log | filter，參數會有以上任一。
+            // fileId: log_id | filter_id，參數會有以上任一。
+            path: "/discover/:type/:fileId/performance",
+            name: "Performance",
+            component: Performance,
+          },
+          {
+            // type: log | filter，參數會有以上任一。
+            // fileId: check_id，透過 `/log-checks/{check_id}` 取得 parent data
+            path: "/discover/conformance/:type/:fileId/map",
+            name: "CheckMap",
+            component: Map,
+            meta: {
+              file: {}, // parent log or parent filter
+            }
+          },
+          {
+            // type: log | filter，參數會有以上任一。
+            // fileId: check_id，透過 `/log-checks/{check_id}` 取得 parent data
+            path: "/discover/conformance/:type/:fileId/conformance",
+            name: "CheckConformance",
+            component: Conformance,
+            meta: {
+              file: {}, // parent log or parent filter
+            }
+          },
+          {
+            // type: log | filter，參數會有以上任一。
+            // fileId: check_id，透過 `/log-checks/{check_id}` 取得 parent data
+            path: "/discover/conformance/:type/:fileId/performance",
+            name: "CheckPerformance",
+            component: Performance,
+            meta: {
+              file: {}, // parent log or parent filter
+            }
+          },
+        ]
+      },
+      {
+        path: "/compare",
+        name: "Compare",
+        children: [
+          {
+            path: "/compare/dashboard/:primaryType/:primaryId/:secondaryType/:secondaryId",
+            name: "CompareDashboard",
+            component: CompareDashboard,
+          }
+        ]
+      },
+    ]
+  },
+  {
+    path: "/:pathMatch(.*)*",
+    name: "NotFound404",
+    component: NotFound404,
+  },
+];
+
+const base_url = import.meta.env.BASE_URL;
+const router = createRouter({
+  history: createWebHistory(base_url), //(/)
+  // history: createWebHashHistory(base_url), // (/#)
+  routes
+});
+
+// 全域性路由守衛
+router.beforeEach((to, from) => {
+  // to: Route: 即將要進入的目標 路由物件
+  // from: Route: 當前導航正要離開的路由
+  let isRemoveCookie = document.cookie.split(';').some(c => c.trim().startsWith('expires=Thu, 01 Jan 1970 00:00:00 UTC;')); // 是否登入，有到期日表示已登出。
+
+  // 當路由到 login 時，有登入要跳轉至home
+  if (to.name === 'Login') {
+   if (isRemoveCookie) router.push({ name: 'Files' });
+  }
+ });
+
+export default router;