如何利用Vue3管理系統實現動態路由和動態側邊選單欄

import { createRouter, createWebHashHistory } from 'vue-router'

const publicRoutes = [
  {
    path: '/',
    redirect: { path: '/login' }
  },
  {
    path: '/login',
    name: 'login',
    component: () => import('../views/login')
  },
  {
    path: '/404',
    name: '404',
    component: () => import('../views/404')
  },
  {
    path: '/home',
    name: 'home',
    component: () => import('../views/home'),
    redirect: '/welcome',
    children: [
      {
        path: '/:pathMatch(.*)*',    // 捕獲所有路由或 404 Not found 路由
        component: () => import('../views/welcome')
      }
    ]
  }
]

const router = createRouter({
  history: createWebHashHistory(),
  routes: publicRoutes
})

export default router

navigationList : [
     {
        id: 1,
        icon: 'icon-jurassic_user',
        name: '使用者管理',
        url: '/user'
    },
     {
        id: 2,
        icon: 'icon-jurassic_user',
        name: '角色管理',
        url: '/role'
     },
     {
        id: 3,
        icon: 'icon-shebei',
        name: '裝置管理',
        url: '/device'
      }
]

import store from '@/store'
//這裡我用vuex的一個變數 asyncRoutestMark 來標識是否拼接過路由
router.beforeEach((to, from, next) => {
    if (!store.state.asyncRoutestMark) {
        // navigationList 是上面模擬介面返回的資料
        // 這裡將新的路由都作為 home 的子路由(實際開發根據情況)
        // meta 是儲存一些資訊，可以用於許可權校驗或其他
        navigationList.forEach( navigation => {
          router.addRoute('home', {
            path: navigation.url,
            meta: { name: navigation.name, isAsync: true, icon: navigation.icon },
            name: menu.url,
            component: () => import(`../views/${menu.url}`)
          })
        })
        console.log(router.getRoutes(), '檢視現有路由')
        store.commit('setAsyncRoutestMark', true) // 新增路由後更改標識為true
        next({ ...to, replace: true })     //路由進行重定向放行
    } else {
      next()
    }
})

menuList :[
  {
    url: '',
    name: '人員管理',
    icon: 'icon-renyuan',
    menuId: 1,
    children: [
      {
        url: '/user',
        name: '使用者管理',
        icon: 'icon-jurassic_user',
        menuId: 1001,
        children: []
      },
      {
        url: '/role',
        name: '角色管理',
        icon: 'icon-jiaose',
        menuId: 1002,
        children: []
      }
    ]
  },
  {
    url: '/device',
    name: '裝置管理',
    icon: 'icon-shebei',
    menuId: 2
  }
]

<template>
  <template v-for="menu in menuList" :key="menu.menuId">
    <a-sub-menu v-if="menu.children && menu.children.length" :key="menu.menuId">
      <template #title>{{ menu.name }}</template>
      <MenuList :menuList="menu.children" />
    </a-sub-menu>
    <a-menu-item :key="menu.menuId" v-else>
      <span>{{ menu.name }}</span>
    </a-menu-item>
  </template>
</template>
<script setup>
import { defineProps } from 'vue'
defineProps({
  menuList: {
    type: Array,
    default: () => []
  }
})
</script>

<template>
  <template v-for="menu in menuList" :key="menu.menuId">
    <a-sub-menu v-if="menu.children && menu.children.length" :key="menu.menuId">
      <template #icon>
        <icon-font :type="menu.icon" />
      </template>
      <template #title>{{ menu.name }}</template>
      <MenuList :menuList="menu.children" />
    </a-sub-menu>
    <a-menu-item :key="menu.menuId" v-else>
      <template #icon>
        <icon-font :type="menu.icon" />
      </template>
      <span>{{ menu.name }}</span>
    </a-menu-item>
  </template>
</template>
<script setup>
import { defineProps } from 'vue'
import { createFromIconfontCN } from '@ant-design/icons-vue'
const IconFont = createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/font_2572336_4hg62uu7hxd.js'
})
defineProps({
  menuList: {
    type: Array,
    default: () => []
  }
})
</script>