feat: finish dynamic route page

src/components/nav-menu/src/nav-menu.vue

@@ -27,7 +27,10 @@
             </template>
             <!-- 遍历里面的item -->
             <template v-for="subitem in item.children" :key="subitem.id">
-              <el-menu-item :index="subitem.id + ''">
+              <el-menu-item
+                :index="subitem.id + ''"
+                @click="handleMenuItemClick(subitem)"
+              >
                 <span>{{ subitem.name }}</span>
               </el-menu-item>
             </template>
@@ -47,6 +50,7 @@
 <script lang="ts">
 import { defineComponent, computed } from 'vue'
 import { useStore } from '@/store'
+import { useRouter } from 'vue-router'
 
 export default defineComponent({
   props: {
@@ -58,9 +62,16 @@ export default defineComponent({
   setup() {
     const store = useStore()
     const userMenus = computed(() => store.state.login.userMenus)
-    console.log(userMenus.value)
+    const router = useRouter()
+
+    const handleMenuItemClick = (item: any) => {
+      router.push({
+        path: item.url ?? '/not-found'
+      })
+    }
     return {
-      userMenus
+      userMenus,
+      handleMenuItemClick
     }
   }
 })

src/store/login/login.ts

@@ -7,7 +7,7 @@ import {
 } from '@/service/login/login'
 import localCache from '../../utils/cache'
 import router from '@/router'
-
+import { mapMenusToRoutes } from '@/utils/map-menus'
 import { IAccount } from '@/service/login/types'
 import { ILoginState } from './types'
 import { IRootState } from '../types'
@@ -32,6 +32,13 @@ const loginModule: Module<ILoginState, IRootState> = {
     },
     changeUserMenus(state, userMenus: any) {
       state.userMenus = userMenus
+
+      // 直接将usermenus => routes
+      const routes = mapMenusToRoutes(userMenus)
+      // 将routes => router.main.children
+      routes.forEach((route) => {
+        router.addRoute('main', route)
+      })
     }
   },
   actions: {

src/utils/map-menus.ts

@@ -0,0 +1,35 @@
+import { RouteRecordRaw } from 'vue-router'
+
+export function mapMenusToRoutes(userMenus: any[]): RouteRecordRaw[] {
+  console.log(userMenus)
+  const routes: RouteRecordRaw[] = []
+
+  // 1、先去加载默认所有的route
+  const allRoutes: RouteRecordRaw[] = []
+  // webpack工具、递归查找某个文件夹内的所有文件
+  const routeFiles = require.context('@/router/main', true, /\.ts/)
+  routeFiles.keys().forEach((key) => {
+    // 拿到文件导出的对象
+    const route = require('@/router/main' + key.split('.')[1])
+    allRoutes.push(route.default)
+  })
+  // 2、根据菜单获取需要添加的routes
+  // userMenus:
+  // type === 2 -> url -> route
+  const _recurseGetRoute = (menus: any[]) => {
+    for (const menu of menus) {
+      // type === 2是才是需要映射出来的菜单
+      if (menu.type === 2) {
+        const route = allRoutes.find((route) => route.path === menu.url)
+        // 将找到的路由放入routes数组中
+        if (route) routes.push(route)
+      } else {
+        // 不等于2、再去递归它的children属性
+        _recurseGetRoute(menu.children)
+      }
+    }
+  }
+
+  _recurseGetRoute(userMenus)
+  return routes
+}

src/views/main/main.vue

@@ -8,7 +8,9 @@
         <el-header class="page-header">
           <nav-header @foldChange="handleFoldChange" />
         </el-header>
-        <el-main class="page-content">Main</el-main>
+        <el-main class="page-content">
+          <router-view></router-view>
+        </el-main>
       </el-container>
     </el-container>
   </div>