// APP.vue

// 頂部導(dǎo)航欄信息
const navBarMenuList = [
  {
    name: 'Home',
    title: '應(yīng)用分析'
  },

  {
    name: 'AppManage',
    title: '應(yīng)用管理'
  }
]

export default [
  {
    path: '/appManage',	// 頂級路由(請讓我這樣簡稱)
    redirect: '/appManage/gameBaseInfo',
    name: 'AppManage',	// 這里與navBarMenu的name對應(yīng)
    children: [
      {
        path: 'gameBaseInfo',	// 次級路由
        name: 'GameBaseInfo',
        icon: 'Memo',
        cnName: '基本信息',
        component: () => import('@/views/AppManage/BaseInfoView.vue'),
        meta: {
          activeMenu: 'gameBaseInfo',	// 用于給菜單的index項(xiàng)賦值，同時對應(yīng)這個路由的地址
          needKeepAlive: true
        }
      },
      {
        path: 'eventManage',
        name: 'EventManage',
        icon: 'Management',
        cnName: '事件管理',
        showChild: false,	// 是否需要展示子菜單
        component: () => import('@/views/AppManage/EventManageView.vue'),
        redirect: '/appManage/eventManage/eventTable',
        meta: {
          needKeepAlive: true,
          activeMenu: 'eventManage'
        },
        children: [
          {
            path: 'eventDetail/:eventID?', // 子路由
            name: 'EventDetail',
            component: () => import('@/views/AppManage/EventDetailsView.vue')
          },
          {
            path: 'eventTable',
            name: 'EventTable',
            component: () => import('@/views/AppManage/EventMangeTable.vue')
          }
        ]
      }
    ]
  }
]

<script lang='ts' setup>
// 頂部導(dǎo)航欄的選中情況
const navBarSelect = ref<string>('Home') 

// 路由信息，同時也是側(cè)邊欄生成的依據(jù)信息
const menuList = reactive<Array<any>>([])

// 頂部導(dǎo)航欄信息
const navBarMenuList = [
  {
    name: 'Home',
    title: '應(yīng)用分析'
  },

  {
    name: 'AppManage',
    title: '應(yīng)用管理'
  }
]

// 側(cè)邊欄跳轉(zhuǎn)路由的基本路由
const basePath = ref<string | undefined>()

/**
 * @description: 創(chuàng)建側(cè)邊欄menu
 * @return {*}
 */
const createdMenuList = () => {
  let routes = router.options.routes // 獲取路由信息
  let activeMenu = routes.find((item) => {
    return item.name === navBarSelect.value // 根據(jù)頂部導(dǎo)航欄的選中情況來選擇選中哪個具體的路由信息，可以打印自己看一下
  })
  basePath.value = activeMenu?.path // 找到需要激活的菜單的路由，后續(xù)用來拼接需要跳轉(zhuǎn)的路由
  menuList.splice(0, menuList.length, ...(activeMenu?.children as Array<any>)) // 清空原來的路由信息，并且加入新選中的
}
    
// 默認(rèn)選中,他根據(jù)路由文件中的meta的activeMenu來判斷當(dāng)前選中的那個菜單
const defaultActive = computed(() => {
  return route.meta.activeMenu
})

</script>
   <!-- 頂部導(dǎo)航欄 -->
        <div class="navBarMenu">
          <el-menu
            :default-active="navBarSelect"
            class="el-menu-demo"
            mode="horizontal"
            @select="changeNavBar"
          >
            <el-menu-item
              v-for="item in navBarMenuList"
              class="navBarMenuItem"
              :index="item.name"
              >{{ item.title }}</el-menu-item
            >
          </el-menu>
        </div>
      <!-- 側(cè)邊欄 -->
<el-menu
          :default-active="defaultActive"
          class="sideBar"
          :collapse="isCollapse"
          ref="siderBar"
        >
          <template v-for="(item, index) in menuList">
            <el-sub-menu :index="`${index}`" v-if="item.children && item.showChild">
              <template #title>
                <el-icon><component :is="item.icon"></component></el-icon>
                <span>{{ item.cnName }}</span>
              </template>
              <router-link
                style="text-decoration: none"
                v-for="val in item.children"
                :to="{ path: basePath + '/' + item.path + '/' + val.path }"
                :key="index"
              >
                <el-menu-item :index="val.path">{{ val.cnName }}</el-menu-item>
              </router-link>
            </el-sub-menu>

            <router-link
              style="text-decoration: none"
              v-else
              :to="{ path: basePath + '/' + item.path }"
              :key="index"
            >
              <el-menu-item :index="item.path">
                <template #title>
                  <el-icon><component :is="item.icon" /></el-icon>
                  <span class="menuTitle">{{ item.cnName }}</span>
                </template>
              </el-menu-item>
            </router-link>
          </template>
          <div class="sideBarFold" @click="changeCollapse">
            <el-icon :size="25"><Fold /></el-icon>
          </div>
        </el-menu>