代码优化

Author: sunshine824

src/components/ABreadCrumb/index.tsx

@@ -1,11 +1,23 @@
-import { defineComponent } from 'vue'
+import { defineComponent, watch, computed, onMounted } from 'vue'
+import { useRoute } from 'vue-router'
 import { Breadcrumb } from 'ant-design-vue'
 
 import styles from './index.module.less'
 
 const ABreadCrumb = defineComponent({
   name: 'ABreadCrumb',
   setup({ props }) {
+    const route = useRoute()
+
+    onMounted(() => {
+      console.log(breadList)
+    })
+
+    // 监听路由变化
+    const breadList = computed(() => {
+      const paths = route.path.split('/')
+    })
+
     return () => (
       <div class={styles['bread-crumb']}>
         <span class={styles['location']}>当前位置：</span>

src/components/GlobalHeader/LevelMenus.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, ref, watch } from 'vue'
+import { defineComponent, onMounted, ref, watch } from 'vue'
 import { RouteRecordRaw, useRoute, useRouter } from 'vue-router'
 import router from '../../router'
 
@@ -17,7 +17,14 @@ const LevelMenus = defineComponent({
 
     const router = useRouter()
 
-    const baseUrl = ref(route.path.split('/')) // 当前跳转基础路由
+    const baseUrl = ref() // 当前跳转基础路由
+
+    onMounted(() => {
+      const paths = route.path.split('/')
+      if (paths.length > 1) {
+        baseUrl.value = '/' + paths[1]
+      }
+    })
 
     // 路由跳转
     const skipTo = (item: RouteRecordRaw) => {
@@ -26,7 +33,10 @@ const LevelMenus = defineComponent({
 
     // 监听路由变化
     watch(route, (val) => {
-      baseUrl.value = val.path.split('/')
+      const paths = val.path.split('/')
+      if (paths.length > 1) {
+        baseUrl.value = '/' + paths[1]
+      }
     })
 
     return () => (
@@ -36,7 +46,7 @@ const LevelMenus = defineComponent({
             return (
               <li
                 onClick={skipTo.bind(this, menu)}
-                class={menu.name == baseUrl.value[1] && styles['active']}
+                class={menu.path == baseUrl.value && styles['active']}
               >
                 <span class={`iconfont ${menu?.meta?.icon} menu-icon`}></span>
                 <span class={styles['title']}>{menu?.meta?.title}</span>

src/components/GlobalHeader/Menus.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, ref, watch, computed } from 'vue'
+import { defineComponent, ref, watch, computed, onMounted } from 'vue'
 import { useRoute, useRouter, RouteRecordRaw } from 'vue-router'
 import { Menu } from 'ant-design-vue'
 
@@ -19,7 +19,12 @@ const Menus = defineComponent({
   setup(props, { slots }) {
     const route = useRoute()
     const router = useRouter()
-    const activeRoute = ref(route.path) // 当前路由
+    const activeRoute = ref() // 当前路由
+
+    onMounted(() => {
+      const paths = route.path.split('/')
+      activeRoute.value = paths[paths.length - 1]
+    })
 
     // 默认展开项
     const openKeys = computed(() => {
@@ -36,13 +41,14 @@ const Menus = defineComponent({
 
     // 监听路由变化
     watch(route, (val) => {
-      activeRoute.value = val.path
+      const paths = val.path.split('/')
+      activeRoute.value = paths[paths.length - 1]
     })
 
     // 子级导航渲染
     const SubItem = (menus: any) => {
       return (
-        <Menu.SubMenu key={menus.path}>
+        <Menu.SubMenu key={menus.name}>
           {{
             title: () => (
               <>
@@ -57,7 +63,7 @@ const Menus = defineComponent({
                 {menus.children.map((menu: any) => {
                   if (!menu.children || !menu.children.length) {
                     return (
-                      <Menu.Item key={menu.path}>
+                      <Menu.Item key={menu.name}>
                         {menus.meta?.icon && (
                           <span
                             class={`iconfont ${menu.meta.icon} menu-icon`}
@@ -92,7 +98,7 @@ const Menus = defineComponent({
           {(props.menuLists as RouteRecordRaw[]).map((menu) => {
             if (!menu.children || !menu.children.length) {
               return (
-                <Menu.Item key={menu.path}>
+                <Menu.Item key={menu.name}>
                   {menu.meta?.icon && (
                     <span class={`iconfont ${menu.meta.icon} menu-icon`}></span>
                   )}

src/mock/user/permission.ts

@@ -5,28 +5,37 @@ const BaseUrl = import.meta.env.VITE_API_BASE_URL as string
 
 const Roles = [
   {
-    url: 'database',
+    moduleUrl: '/database', // 模块地址
+    url: '/database', // 路由地址
     name: '数据库配置',
     icon: 'icon-zichan',
   },
   {
-    url: 'eoms',
+    moduleUrl: '/eoms',
+    url: '/eoms',
     name: '运维配置',
     icon: 'icon-yunwei1',
     list: [
       {
         name: '故障处理方案',
-        url: 'eoms/fault',
+        moduleUrl: '/eoms/fault',
+        url: 'fault',
         icon: '',
       },
       {
+        moduleUrl: '/eoms/alarm',
+        url: 'alarm',
         name: '告警模板管理',
-        url: 'eoms/alarm',
         icon: '',
       },
     ],
   },
-  { name: '物联管理', url: 'smart', icon: 'icon-wulianwang' },
+  {
+    moduleUrl: '/smart',
+    url: '/smart',
+    name: '物联管理',
+    icon: 'icon-wulianwang',
+  },
 ]
 
 Mock.mock(`${BaseUrl}/navPerson`, 'get', () => {

src/router/index.ts

@@ -1,6 +1,7 @@
 import {
   createRouter,
   createWebHashHistory,
+  createWebHistory,
   RouteRecordRaw,
   RouteLocationNormalized,
   NavigationGuardNext,
@@ -15,7 +16,7 @@ let isAddDynamicMenuRoutes = false // 是否请求路由表
 
 // 路由实例
 const router: Router = createRouter({
-  history: createWebHashHistory(),
+  history: createWebHistory(),
   routes: baseRoutes,
 })
 
@@ -27,11 +28,9 @@ function fnAddDynamicMenuRoutes(
   menuList.forEach((item) => {
     if (!item.list) {
       routes.push({
-        path: `/${item.url}`,
-        name: item.url,
-        //component: (resolve: any) => require([`@/views/${item.url}/index`], resolve),
-        component: () =>
-          import(/* webpackChunkName: "login" */ `../views/${item.url}/index`),
+        path: `${item.url}`,
+        name: item.url.slice(0, 1) == '/' ? item.url.slice(1) : item.url, // 截取开头"/"
+        component: () => import('../views' + item.moduleUrl + '/index'),
         meta: {
           title: item.name,
           hidden: false,
@@ -41,10 +40,10 @@ function fnAddDynamicMenuRoutes(
     } else if (item.list && item.list.length) {
       const menus = fnAddDynamicMenuRoutes(item.list, [])
       routes.push({
-        path: `/${item.url}`,
-        name: item.url,
+        path: `${item.url}`,
+        name: item.url.slice(0, 1) == '/' ? item.url.slice(1) : item.url, // 截取开头"/"
         component: RouteLayout,
-        redirect: menus[0].path,
+        redirect: item.url + '/' + menus[0].path,
         children: menus,
         meta: {
           title: item.name,
@@ -78,11 +77,17 @@ router.beforeEach(
               menu.menuList || [],
               [],
             )
+            // 添加兜底路由
+            menuRoutes.push({
+              path: '/:pathMatch(.*)*',
+              redirect: { name: '404' },
+            })
             mainRoutes.children?.unshift(...menuRoutes)
             // 动态添加路由
             router.addRoute(mainRoutes)
             // 注：这步很关键，不然导航获取不到路由
             router.options.routes.unshift(mainRoutes)
+            console.log(router.options)
             // 本地存储按钮权限集合
             sessionStorage.setItem(
               'permissions',
@@ -122,4 +127,8 @@ router.beforeEach(
   },
 )
 
+router.onError((handler) => {
+  console.log(handler)
+})
+
 export default router