Add empty page component to handle unmatched

routes

src/router/index.ts

@@ -110,6 +110,10 @@ export const routes: RouteRecordRaw[] = [
                 name: 'Daftar Gangguan Diselesaikan Mobile APKT',
                 component: GangguanTable7,
               },
+              {
+                path: ':pathMatch(.*)*',
+                component: EmptyPage,
+              }
             ],
           },
           {
@@ -181,7 +185,15 @@ export const routes: RouteRecordRaw[] = [
                 name: 'Rekapitulasi Cleansing Transaksi TM',
                 component: GangguanTable20,
               },
+              {
+                path: ':pathMatch(.*)*',
+                component: EmptyPage,
+              }
             ],
+          },
+          {
+            path: ':pathMatch(.*)*',
+            component: EmptyPage,
           }
         ]
       },
@@ -228,6 +240,10 @@ export const routes: RouteRecordRaw[] = [
                 name: 'Daftar Keluhan Selesai di CC123',
                 component: KeluhanTable7,
               },
+              {
+                path: ':pathMatch(.*)*',
+                component: EmptyPage,
+              }
             ],
           },
           {
@@ -269,13 +285,20 @@ export const routes: RouteRecordRaw[] = [
                 name: 'Rekapitulasi Keluhan Berdasarkan Media',
                 component: KeluhanTable14,
               },
-
               {
                 path: '8',
                 name: 'Rekapitulasi Rating Per Unit',
                 component: KeluhanTable15,
               },
+              {
+                path: ':pathMatch(.*)*',
+                component: EmptyPage,
+              }
             ],
+          },
+          {
+            path: ':pathMatch(.*)*',
+            component: EmptyPage,
           }
         ],
       },
@@ -336,8 +359,16 @@ export const routes: RouteRecordRaw[] = [
                     name: 'Rekapitulasi Gangguan Belum Selesai',
                     component: MonalisaTable9,
                   },
+                  {
+                    path: ':pathMatch(.*)*',
+                    component: EmptyPage,
+                  }
                 ],
               },
+              {
+                path: ':pathMatch(.*)*',
+                component: EmptyPage,
+              }
             ],
           },
           {
@@ -383,12 +414,20 @@ export const routes: RouteRecordRaw[] = [
                     name: 'Rekapitulasi Keluhan Belum Selesai',
                     component: MonalisaTable16,
                   },
+                  {
+                    path: ':pathMatch(.*)*',
+                    component: EmptyPage,
+                  }
                 ],
               },
+              {
+                path: ':pathMatch(.*)*',
+                component: EmptyPage,
+              }
             ],
           },
           {
-            path: 'kpi',
+            path: 'laporan',
             name: 'Laporan KPI',
             children: [
               {
@@ -415,6 +454,10 @@ export const routes: RouteRecordRaw[] = [
                     name: 'Kepatuhan dan Akurasi  Dalam Pelaporan',
                     component: MonalisaTable20,
                   },
+                  {
+                    path: ':pathMatch(.*)*',
+                    component: EmptyPage,
+                  }
                 ],
               },
               {
@@ -441,7 +484,15 @@ export const routes: RouteRecordRaw[] = [
                     name: 'Kepatuhan dan Akurasi  Dalam Pelaporan',
                     component: MonalisaTable24,
                   },
+                  {
+                    path: ':pathMatch(.*)*',
+                    component: EmptyPage,
+                  }
                 ],
+              },
+              {
+                path: ':pathMatch(.*)*',
+                component: EmptyPage,
               }
             ],
           },
@@ -460,8 +511,16 @@ export const routes: RouteRecordRaw[] = [
                 name: 'Laporan Check In /Check Out (CICO)',
                 component: CicoTable1,
               },
+              {
+                path: ':pathMatch(.*)*',
+                component: EmptyPage,
+              }
             ],
           },
+          {
+            path: ':pathMatch(.*)*',
+            component: EmptyPage,
+          }
         ],
       },
       {
@@ -482,6 +541,10 @@ export const routes: RouteRecordRaw[] = [
                 name: 'Laporan Anomali Penangan Pengaduan Gangguan Petugas',
                 component: AnomaliTable2,
               },
+              {
+                path: ':pathMatch(.*)*',
+                component: EmptyPage,
+              }
             ],
           },
           {
@@ -493,8 +556,16 @@ export const routes: RouteRecordRaw[] = [
                 name: 'Laporan Anomali Penangan Pengaduan Keluhan Unit',
                 component: AnomaliTable3,
               },
+              {
+                path: ':pathMatch(.*)*',
+                component: EmptyPage,
+              }
             ],
           },
+          {
+            path: ':pathMatch(.*)*',
+            component: EmptyPage,
+          }
         ],
       },
       {
@@ -506,6 +577,10 @@ export const routes: RouteRecordRaw[] = [
             name: 'Laporan CTT & KWH Periksa',
             component: CttTable1,
           },
+          {
+            path: ':pathMatch(.*)*',
+            component: EmptyPage,
+          }
         ],
       },
       {
@@ -521,6 +596,10 @@ export const routes: RouteRecordRaw[] = [
                 name: 'Daftar Gangguan Dan Material Yang Dipakai',
                 component: MaterialTable1,
               },
+              {
+                path: ':pathMatch(.*)*',
+                component: EmptyPage,
+              }
             ],
           },
           {
@@ -532,7 +611,15 @@ export const routes: RouteRecordRaw[] = [
                 name: 'Rekapitulasi Pemakaian Material',
                 component: MaterialTable2,
               },
+              {
+                path: ':pathMatch(.*)*',
+                component: EmptyPage,
+              }
             ],
+          },
+          {
+            path: ':pathMatch(.*)*',
+            component: EmptyPage,
           }
         ],
       },
@@ -545,6 +632,10 @@ export const routes: RouteRecordRaw[] = [
             name: 'Transaksi APKT',
             component: TransaksiTable1,
           },
+          {
+            path: ':pathMatch(.*)*',
+            component: EmptyPage,
+          }
         ],
       },
       {
@@ -555,9 +646,17 @@ export const routes: RouteRecordRaw[] = [
             path: '1',
             name: 'Pencarian Report Number',
             component: PencarianDataTable1,
+          },
+          {
+            path: ':pathMatch(.*)*',
+            component: EmptyPage,
           }
         ]
       },
+      {
+        path: ':pathMatch(.*)*',
+        component: EmptyPage,
+      }
     ]
   },
   {
@@ -575,6 +674,10 @@ export const routes: RouteRecordRaw[] = [
     name: 'Not Found',
     component: NotFoundView
   },
+  {
+    path: ':pathMatch(.*)*',
+    redirect: '/404'
+  }
 ]
 
 export const mergeChildrenRoutes = (routes: RouteRecordRaw[]): RouteRecordRaw[] => {
@@ -677,32 +780,48 @@ router.beforeEach((to, from, next) => {
   const auth = useAuthStore();
 
   // if to is not found, redirect to 404
-  if (to.matched.length === 0) {
+  // if (to.matched.length === 0) {
-    if (to.path === '/') {
+  //   if (to.path === '/') {
-      if (auth.isLoggedIn) {
+  //     if (auth.isLoggedIn) {
-        next('/home')
+  //       next('/home')
-      } else {
+  //     } else {
-        next('/login')
+  //       next('/login')
-      }
+  //     }
+  //   } else {
+  //     next('/404')
+  //   }
+  // } else {
+  //   // if to is not login and user is not logged in, redirect to login
+  //   if (auth.isLoggedIn) {
+  //     // if to is login and user is logged in, redirect to home
+  //     if (to.path === '/login') {
+  //       next('/home')
+  //     } else {
+  //       next()
+  //     }
+  //   } else {
+  //     // if to is 404, redirect to 404
+  //     if (to.path !== '/404' && to.path !== '/login') {
+  //       next('/login')
+  //     } else {
+  //       next()
+  //     }
+  //   }
+  // }
+
+  if (auth.isLoggedIn) {
+    // if to is login and user is logged in, redirect to home
+    if (to.path === '/login') {
+      next('/home')
     } else {
-      next('/404')
+      next()
     }
   } else {
-    // if to is not login and user is not logged in, redirect to login
+    // if to is 404, redirect to 404
-    if (auth.isLoggedIn) {
+    if (to.path !== '/404' && to.path !== '/login') {
-      // if to is login and user is logged in, redirect to home
+      next('/login')
-      if (to.path === '/login') {
-        next('/home')
-      } else {
-        next()
-      }
     } else {
-      // if to is 404, redirect to 404
+      next()
-      if (to.path !== '/404' && to.path !== '/login') {
-        next('/login')
-      } else {
-        next()
-      }
     }
   }
 })