fix Bug or add example

src/router/generator-routers.ts

@@ -1,8 +1,7 @@
 import { adminMenus } from '@/api/system/menu'
 import { constantRouterComponents, constantRouterIcon } from './constantRouterComponents'
 import router from '@/router/index'
-import { constantRouter, asyncRoutes } from '@/router/index'
-import { NEmpty } from 'naive-ui'
+import { constantRouter } from '@/router/index'
 import { RouteRecordRaw } from 'vue-router'
 
 /**
@@ -12,9 +11,9 @@ import { RouteRecordRaw } from 'vue-router'
  * @param parent
  * @returns {*}
  */
-export const routerGenerator = (routerMap, parent) => {
+export const routerGenerator = (routerMap, parent?):any[] => {
   return routerMap.map(item => {
-    const currentRouter = {
+    const currentRouter:any = {
       // 路由地址 动态拼接生成如 /dashboard/workplace
       path: `${ parent && parent.path || '' }/${ item.path }`,
       // 路由名称，建议唯一
@@ -53,12 +52,6 @@ export const generatorDynamicRouter = (): Promise<RouteRecordRaw[]> => {
     adminMenus()
       .then((result) => {
         const routeList = routerGenerator(result)
-        // 设置模块重定向到菜单
-        // routeList.forEach((item) => {
-        //   if (item.children?.length > 0 && !item.redirect) {
-        //     item.redirect = { name: item.children[0].name }
-        //   }
-        // })
         const asyncRoutesList = [...constantRouter, ...routeList]
         asyncRoutesList.forEach(item => {
           router.addRoute(item)

src/router/modules/comp.ts

@@ -24,16 +24,16 @@ const routes: Array<RouteRecordRaw> = [
     redirect: '/comp/console',
     component: Layout,
     meta: {
-      title: '组件',
+      title: '组件示例',
       icon: renderIcon(WalletOutlined ),
-      sort: 1
+      sort: 8
     },
     children: [
       {
         path: 'table',
         name: `${ routeName }_table`,
         meta: {
-          title: '基础表格',
+          title: '表格',
         },
         component: () => import('@/views/comp/table/list.vue')
       }

src/router/modules/list.ts

@@ -0,0 +1,41 @@
+import { RouteRecordRaw } from 'vue-router'
+import { Layout } from '@/router/constant';
+import { TableOutlined } from '@vicons/antd'
+import { renderIcon } from '@/utils/index'
+
+/**
+ * @param name 路由名称, 必须设置,且不能重名
+ * @param meta 路由元信息（路由附带扩展信息）
+ * @param redirect 重定向地址, 访问这个路由时,自定进行重定向
+ * @param meta.disabled 禁用整个菜单
+ * @param meta.title 菜单名称
+ * @param meta.icon 菜单图标
+ * @param meta.keepAlive 缓存该路由
+ * @param meta.sort 排序越小越排前
+ *
+ * */
+const routes: Array<RouteRecordRaw> = [
+    {
+        path: '/list',
+        name: 'List',
+        redirect: '/list/basic-list',
+        component: Layout,
+        meta: {
+            title: '列表页面',
+            icon: renderIcon(TableOutlined),
+            sort: 1
+        },
+        children: [
+            {
+                path: 'basic-list',
+                name: 'basic-list',
+                meta: {
+                    title: '基础列表',
+                },
+                component: () => import('@/views/list/basicList/index.vue')
+            }
+        ],
+    }
+]
+
+export default routes

src/router/modules/setting.ts

@@ -0,0 +1,49 @@
+import { RouteRecordRaw } from 'vue-router'
+import { Layout } from '@/router/constant';
+import { SettingOutlined } from '@vicons/antd'
+import { renderIcon } from '@/utils/index'
+
+/**
+ * @param name 路由名称, 必须设置,且不能重名
+ * @param meta 路由元信息（路由附带扩展信息）
+ * @param redirect 重定向地址, 访问这个路由时,自定进行重定向
+ * @param meta.disabled 禁用整个菜单
+ * @param meta.title 菜单名称
+ * @param meta.icon 菜单图标
+ * @param meta.keepAlive 缓存该路由
+ * @param meta.sort 排序越小越排前
+ *
+ * */
+const routes: Array<RouteRecordRaw> = [
+    {
+        path: '/setting',
+        name: 'Setting',
+        redirect: '/setting/account',
+        component: Layout,
+        meta: {
+            title: '设置页面',
+            icon: renderIcon(SettingOutlined),
+            sort: 5
+        },
+        children: [
+            {
+                path: 'account',
+                name: 'setting-account',
+                meta: {
+                    title: '个人设置',
+                },
+                component: () => import('@/views/setting/account/account.vue')
+            },
+            {
+                path: 'system',
+                name: 'setting-system',
+                meta: {
+                    title: '系统设置',
+                },
+                component: () => import('@/views/setting/system/system.vue')
+            }
+        ]
+    }
+]
+
+export default routes

src/router/router-guards.ts

@@ -6,146 +6,137 @@ import NProgress from 'nprogress' // progress bar
 import { ACCESS_TOKEN } from '@/store/mutation-types'
 import { storage } from '@/utils/Storage'
 import { debounce } from '@/utils/lodashChunk'
-import { useGlobSetting } from '@/hooks/setting'
 import { PageEnum } from '@/enums/pageEnum'
 
-const globSetting = useGlobSetting()
-
 
 NProgress.configure({ showSpinner: false }) // NProgress Configuration
 
-const whitePathList = ['/login'] // no redirect whitelist
-
 const LOGIN_PATH = PageEnum.BASE_LOGIN
-const DEFAULT_PATH = PageEnum.BASE_HOME
 
-
-const permissionMode = globSetting.permissionMode //ROLE 前端固定角色  BACK 动态获取
+const whitePathList = [LOGIN_PATH] // no redirect whitelist
 
 // 是否需要从后端获取菜单
 const isGetMenus = debounce(
-  ({ to, from, next, hasRoute, router }) => {
-    const userStore = useUserStoreWidthOut();
-    const asyncRouteStore = useAsyncRouteStoreWidthOut();
-    userStore.GetInfo().then(res => {
-      asyncRouteStore.generateRoutes(res).then(() => {
-        // 根据roles权限生成可访问的路由表
-        // 动态添加可访问路由表
-        asyncRouteStore.getRouters().forEach((item) => {
-          router.addRoute(item)
-        });
-        debugger
-        // if (whitePathList.includes(to.name as string)) return
-        if (!hasRoute) {
-          // 请求带有 redirect 重定向时，登录自动重定向到该地址
-          const redirect = decodeURIComponent((from.query.redirect || '') as string)
-          if (to.path === redirect) {
-            next({ ...to, replace: true })
-          } else {
-            // 跳转到目的路由
-            next({ ...to, replace: true })
-          }
-        } else {
-          next()
-        }
-      }).catch(() => next({ path: defaultRoutePath }))
-    })
-  },
-  1800,
-  { leading: true }
+    ({ to, from, next, hasRoute, router }) => {
+        const userStore = useUserStoreWidthOut();
+        const asyncRouteStore = useAsyncRouteStoreWidthOut();
+        userStore.GetInfo().then(res => {
+            asyncRouteStore.generateRoutes(res).then(() => {
+                // 根据roles权限生成可访问的路由表
+                // 动态添加可访问路由表
+                asyncRouteStore.getRouters().forEach((item) => {
+                    router.addRoute(item)
+                });
+                // if (whitePathList.includes(to.name as string)) return
+                if (!hasRoute) {
+                    // 请求带有 redirect 重定向时，登录自动重定向到该地址
+                    const redirect = decodeURIComponent((from.query.redirect || '') as string)
+                    if (to.path === redirect) {
+                        next({ ...to, replace: true })
+                    } else {
+                        // 跳转到目的路由
+                        next({ ...to, replace: true })
+                    }
+                } else {
+                    next()
+                }
+            }).catch(() => next({ path: defaultRoutePath }))
+        })
+    },
+    1800,
+    { leading: true }
 )
 
 
 export function createRouterGuards(router: Router) {
-  const userStore = useUserStoreWidthOut();
-  const asyncRouteStore = useAsyncRouteStoreWidthOut();
-  router.beforeEach(async (to, from, next) => {
-    NProgress.start()
-
-    if (from.path === LOGIN_PATH && to.name === 'errorPage') {
-      next(PageEnum.BASE_HOME);
-      return;
-    }
-
-    // Whitelist can be directly entered
-    if (whitePathList.includes(to.path as PageEnum)) {
-      next();
-      return;
-    }
-
-    const token = storage.get(ACCESS_TOKEN)
-    const roles = storage.get('roles')
-
-    if (!token) {
-
-      // You can access without permission. You need to set the routing meta.ignoreAuth to true
-      if (to.meta.ignoreAuth) {
-        next();
-        return;
-      }
-      // redirect login page
-      const redirectData: { path: string; replace: boolean; query?: Recordable<string> } = {
-        path: LOGIN_PATH,
-        replace: true,
-      };
-      if (to.path) {
-        redirectData.query = {
-          ...redirectData.query,
-          redirect: to.path,
-        };
-      }
-      next(redirectData);
-      return;
-    }
-
-    if (asyncRouteStore.getIsDynamicAddedRoute) {
-      next();
-      return;
-    }
-
-    const userInfo = await userStore.GetInfo()
-
-    const routes = await asyncRouteStore.generateRoutes(userInfo)
-
-    // 动态添加可访问路由表
-    routes.forEach((item) => {
-      router.addRoute(item)
-    });
-
-    const redirectPath = (from.query.redirect || to.path) as string;
-    const redirect = decodeURIComponent(redirectPath);
-    const nextData = to.path === redirect ? { ...to, replace: true } : { path: redirect };
-    asyncRouteStore.setDynamicAddedRoute(true);
-    next(nextData);
-    NProgress.done()
-  })
-
-  router.afterEach((to, from, failure) => {
-    document.title = (to?.meta?.title as string) || document.title
-    if (isNavigationFailure(failure)) {
-      //console.log('failed navigation', failure)
-    }
+    const userStore = useUserStoreWidthOut();
     const asyncRouteStore = useAsyncRouteStoreWidthOut();
-    // 在这里设置需要缓存的组件名称
-    const keepAliveComponents = asyncRouteStore.keepAliveComponents
-    const currentComName: any = to.matched.find((item) => item.name == to.name)?.name
-    if (currentComName && !keepAliveComponents.includes(currentComName) && to.meta?.keepAlive) {
-      // 需要缓存的组件
-      keepAliveComponents.push(currentComName)
-    } else if (!to.meta?.keepAlive || to.name == 'Redirect') {
-      // 不需要缓存的组件
-      const index = asyncRouteStore.keepAliveComponents.findIndex(
-        (name) => name == currentComName
-      )
-      if (index != -1) {
-        keepAliveComponents.splice(index, 1)
-      }
-    }
-    asyncRouteStore.setKeepAliveComponents(keepAliveComponents)
-    NProgress.done() // finish progress bar
-  })
+    router.beforeEach(async (to, from, next) => {
+        NProgress.start()
+        if (from.path === LOGIN_PATH && to.name === 'errorPage') {
+            next(PageEnum.BASE_HOME);
+            return;
+        }
 
-  router.onError((error) => {
-    console.log(error, '路由错误')
-  })
+        // Whitelist can be directly entered
+        if (whitePathList.includes(to.path as PageEnum)) {
+            next();
+            return;
+        }
+
+        const token = storage.get(ACCESS_TOKEN)
+        const roles = storage.get('roles')
+
+        if (!token) {
+
+            // You can access without permission. You need to set the routing meta.ignoreAuth to true
+            if (to.meta.ignoreAuth) {
+                next();
+                return;
+            }
+            // redirect login page
+            const redirectData: { path: string; replace: boolean; query?: Recordable<string> } = {
+                path: LOGIN_PATH,
+                replace: true,
+            };
+            if (to.path) {
+                redirectData.query = {
+                    ...redirectData.query,
+                    redirect: to.path,
+                };
+            }
+            next(redirectData);
+            return;
+        }
+
+        if (asyncRouteStore.getIsDynamicAddedRoute) {
+            next();
+            return;
+        }
+
+        const userInfo = await userStore.GetInfo()
+
+        const routes = await asyncRouteStore.generateRoutes(userInfo)
+
+        // 动态添加可访问路由表
+        routes.forEach((item) => {
+            router.addRoute(item)
+        });
+
+        const redirectPath = (from.query.redirect || to.path) as string;
+        const redirect = decodeURIComponent(redirectPath);
+        const nextData = to.path === redirect ? { ...to, replace: true } : { path: redirect };
+        asyncRouteStore.setDynamicAddedRoute(true);
+        next(nextData);
+        NProgress.done()
+    })
+
+    router.afterEach((to, from, failure) => {
+        document.title = (to?.meta?.title as string) || document.title
+        if (isNavigationFailure(failure)) {
+            //console.log('failed navigation', failure)
+        }
+        const asyncRouteStore = useAsyncRouteStoreWidthOut();
+        // 在这里设置需要缓存的组件名称
+        const keepAliveComponents = asyncRouteStore.keepAliveComponents
+        const currentComName: any = to.matched.find((item) => item.name == to.name)?.name
+        if (currentComName && !keepAliveComponents.includes(currentComName) && to.meta?.keepAlive) {
+            // 需要缓存的组件
+            keepAliveComponents.push(currentComName)
+        } else if (!to.meta?.keepAlive || to.name == 'Redirect') {
+            // 不需要缓存的组件
+            const index = asyncRouteStore.keepAliveComponents.findIndex(
+                (name) => name == currentComName
+            )
+            if (index != -1) {
+                keepAliveComponents.splice(index, 1)
+            }
+        }
+        asyncRouteStore.setKeepAliveComponents(keepAliveComponents)
+        NProgress.done() // finish progress bar
+    })
+
+    router.onError((error) => {
+        console.log(error, '路由错误')
+    })
 }