From a66b1bde4959c51894fb874840d8032a83d8567b Mon Sep 17 00:00:00 2001 From: Dede Fuji Abdul Date: Fri, 20 Oct 2023 08:55:05 +0700 Subject: [PATCH] update route --- src/router/index.ts | 61 +++++++++++++++++++++++++++++++++++++++------ src/utils/route.ts | 22 +++++++++++++++- 2 files changed, 75 insertions(+), 8 deletions(-) diff --git a/src/router/index.ts b/src/router/index.ts index ace8c13..7936d9a 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -463,6 +463,49 @@ const routes: RouteRecordRaw[] = [ }, ] +// const createRoute = (route: RouteRecordRaw[]): RouteRecordRaw[] => { +// var newRoute: RouteRecordRaw[] = [] + +// const getRoute = (route: RouteRecordRaw[], parent: string = '') => { +// route.forEach((r) => { +// if (r.children) { +// if (r.component) { +// var fullPath = `${parent.replace('/', '')}/${r.path.replace('/', '')}` +// fullPath = hasMoreThanTwoSlashes(fullPath) ? removeExtraSlashes(fullPath) : fullPath +// newRoute.push({ +// path: fullPath, +// name: r.name, +// component: r.component +// } as RouteRecordRaw) +// } +// getRoute(r.children, `${parent}/${r.path}`) +// } else { +// var fullPath = `${parent.replace('/', '')}/${r.path.replace('/', '')}` +// if (newRoute.find((nr) => nr.path !== '/' && nr.path === '/home' && fullPath.includes(nr.path))) { +// const index = newRoute.findIndex((nr) => nr.path !== '/' && fullPath.includes(nr.path)) +// newRoute[index] = { +// ...newRoute[index], children: [...newRoute[index].children ?? [], { +// path: fullPath === '/home/' ? '' : fullPath.includes('/home/') ? fullPath.replace('/home/', '').split('/').join('-') : fullPath.split('/').join('-'), +// name: r.name, +// component: r.component +// } as RouteRecordRaw] +// } +// } else { +// newRoute.push({ +// path: fullPath, +// name: r.name, +// component: r.component +// } as RouteRecordRaw) +// } +// } +// }) +// } +// getRoute(route) +// console.log(newRoute); + +// return newRoute +// } + const createRoute = (route: RouteRecordRaw[]): RouteRecordRaw[] => { var newRoute: RouteRecordRaw[] = [] @@ -470,8 +513,7 @@ const createRoute = (route: RouteRecordRaw[]): RouteRecordRaw[] => { route.forEach((r) => { if (r.children) { if (r.component) { - var fullPath = `${parent.replace('/', '')}/${r.path.replace('/', '')}` - fullPath = hasMoreThanTwoSlashes(fullPath) ? removeExtraSlashes(fullPath) : fullPath + const fullPath = `${parent.replace('/', '')}/${r.path.replace('/', '')}` newRoute.push({ path: fullPath, name: r.name, @@ -480,12 +522,12 @@ const createRoute = (route: RouteRecordRaw[]): RouteRecordRaw[] => { } getRoute(r.children, `${parent}/${r.path}`) } else { - var fullPath = `${parent.replace('/', '')}/${r.path.replace('/', '')}` + const fullPath = `${parent.replace('/', '')}/${r.path.replace('/', '')}` if (newRoute.find((nr) => nr.path !== '/' && nr.path === '/home' && fullPath.includes(nr.path))) { const index = newRoute.findIndex((nr) => nr.path !== '/' && fullPath.includes(nr.path)) newRoute[index] = { ...newRoute[index], children: [...newRoute[index].children ?? [], { - path: fullPath === '/home/' ? '' : fullPath.includes('/home/') ? fullPath.replace('/home/', '').split('/').join('-') : fullPath.split('/').join('-'), + path: fullPath === '/home/' ? '' : fullPath.includes('/home/') ? fullPath.replace('/home/', '') : fullPath, name: r.name, component: r.component } as RouteRecordRaw] @@ -501,15 +543,20 @@ const createRoute = (route: RouteRecordRaw[]): RouteRecordRaw[] => { }) } getRoute(route) - console.log(newRoute); - return newRoute + // remove duplicate route path and sort by path length + const uniqueRoute = newRoute.filter((nr, index, self) => self.findIndex((n) => n.path === nr.path) === index).sort((a, b) => b.path.length - a.path.length) + + return uniqueRoute } + const router = createRouter({ - history: createWebHistory(import.meta.env.VITE_BASE_DIRECTORY), + history: createWebHistory(), linkActiveClass: 'active', routes: createRoute(routes) }) +console.log(router.getRoutes()); + router.beforeEach((to, from, next) => { // redirect to login page if not logged in and trying to access a restricted page diff --git a/src/utils/route.ts b/src/utils/route.ts index 12b9dea..3626c86 100644 --- a/src/utils/route.ts +++ b/src/utils/route.ts @@ -30,11 +30,31 @@ const convertToDashedString = (input: string): string => { return `/${parts.join('-')}`; } +// export const convertRouteToMenu = (data: RouteRecordRaw[], basePath: string = '/home', iconIndex: number = 0): MenuItemModel[] => { +// return data.filter((i) => i.path !== '').map((item) => { +// const convertedItem: MenuItemModel = { +// name: item.name?.toString() || '', +// path: convertToDashedString(`${basePath}/${item.path}`).replace('/home-', '/home/'), +// expanded: false, +// icon: undefined, +// children: [], +// }; + +// if (item.children) { +// convertedItem.icon = navigationIcon[iconIndex]; +// iconIndex = (iconIndex + 1) % navigationIcon.length; +// convertedItem.children = convertRouteToMenu(item.children, `${basePath}/${item.path}`, iconIndex); +// } + +// return convertedItem +// }) +// } + export const convertRouteToMenu = (data: RouteRecordRaw[], basePath: string = '/home', iconIndex: number = 0): MenuItemModel[] => { return data.filter((i) => i.path !== '').map((item) => { const convertedItem: MenuItemModel = { name: item.name?.toString() || '', - path: convertToDashedString(`${basePath}/${item.path}`).replace('/home-', '/home/'), + path: `${basePath}/${item.path}`, expanded: false, icon: undefined, children: [],