TDesign：遍历路由数据来填充menu菜单组件的问题

一、使用TDesign的菜单组件的时候，对菜单的数据是遍历路由信息填充上去的，方便菜单栏扩充。

一开始我是直接遍历，没有注意到便签的区别以及value值的区别

导致没有子菜单的情况下，右侧依然出现箭头，而且所有菜单功能跟第一项的一致，点击其他项菜单，第一项菜单也被触发，这时我想到应该是value值控制功能，标签控制了右侧箭头

红色箭头表示没有子菜单，但是依然右侧有箭头

解决方法：

一、value值放进路由元信息中去，解决功能一致问题；

二、遍历路由信息，判断item.children是否存在，children存在填充到t-submenu标签，children不存在填充到t-menu-item便签。

嵌套的子路由依然去进行以上判断（代码如下）

import { createRouter, createWebHashHistory } from 'vue-router'
import Layout from '../layout'
import Animal from '../views/biology/animal'
import Botany from '../views/biology/botany'

// // 异步路由
export const asyncRoutes = [
  {
    path: '/biology',
    name: 'biology',
    component: Layout,
    redirect: '/biology/animal/bird',
    meta: { title: '动植物', icon: 'logo-github-filled', value:'3' },
    children: [
      {
        path: 'animal',
        name: 'animal',
        component: Animal,
        redirect: '/biology/animal/bird',
        meta: { title: '动物', alive: true, value: '3-1' },
        children: [
          {
            path: 'bird',
            name: 'bird',
            component: () => import(/* webpackChunkName: "bird" */ '../views/biology/animal/bird'),
            meta: { title: '鸟类', hidden: true, activeMenu: '/biology/animal/bird',value:'3-1-1' }
          },
          {
            path: 'elephant',
            name: 'dlephant',
            component: () => import(/* webpackChunkName: "elephant" */ '../views/biology/animal/elephant'),
            meta: { title: '大象群', hidden: true, activeMenu: '/biology/animal/bird',value:'3-1-2' }
          },
          {
            path: 'monkey',
            name: 'monkey',
            component: () => import(/* webpackChunkName: "monkey" */ '../views/biology/animal/monkey'),
            meta: { title: '猴类', hidden: true, activeMenu: '/biology/animal/bird',value:'3-1-3' }
          }
        ]
      },
      {
        path: 'botany',
        name: 'botany',
        component: Botany,
        meta: { title: '植物', alive: true, value:'3-5'},
        children: [
          {
            path: 'flower',
            name: 'flower',
            component: () => import(/* webpackChunkName: "flower" */ '../views/biology/botany/flower'),
            meta: { title: '鲜花', hidden: true, activeMenu: '/biology/animal/bird',value:'3-5-1' }
          },
          {
            path: 'tree',
            name: 'tree',
            component: () => import(/* webpackChunkName: "tree" */ '../views/biology/botany/tree'),
            meta: { title: '树木', hidden: true, activeMenu: '/biology/animal/bird',value:'3-5-2' }
          }
        ]
      },
      {
        path: 'dislike',
        name: 'dislike',
        component: () => import(/* webpackChunkName: "dislike" */ '../views/biology/dislike'),
        meta: { title: '不喜爱的', hidden: true, activeMenu: '/biology/animal/bird',value:'3-2' }
      },
      {
        path: 'like',
        name: 'like',
        component: () => import(/* webpackChunkName: "like" */ '../views/biology/like'),
        meta: { title: '喜爱的', hidden: true, activeMenu: '/biology/animal/bird',value:'3-3' }
      }
    ]
  },
  {
    path: '/personal',
    name: 'personal',
    component: Layout,
    redirect: '/personal',
    component: () => import(/* webpackChunkName: "personal" */ '../views/personal'),
    meta: { title: '个人中心', icon: 'user-circle', value: 'user-circle' }
  },
  {
    path: '/video-area',
    name: 'videoArea',
    component: Layout,
    redirect: '/video-area/part-one',
    meta: { title: '视频区', icon: 'play-circle', value:'4' },
    children: [
      {
        path: 'part-one',
        name: 'partOne',
        component: () => import(/* webpackChunkName: "part-one" */ '../views/video-area/part-one'),
        meta: { title: '视频一区',value: '4-1' }
      },
      {
        path: 'part-two',
        name: 'partTwo',
        component: () => import(/* webpackChunkName: "part-two" */ '../views/video-area/part-two'),
        meta: { title: '视频二区',value: '4-2' }
      },
      {
        path: 'part-three',
        name: 'partThree',
        component: () => import(/* webpackChunkName: "part-three" */ '../views/video-area/part-three'),
        meta: { title: '视频三区',value: '4-3' }
      }
    ]
  },
  {
    path: '/exescope',
    name: 'exescope',
    component: Layout,
    redirect: '/exescope',
    component: () => import(/* webpackChunkName: "exescope" */ '../views/exescope'),
    meta: { title: '资源编辑', icon: 'edit-1',value: 'edit1' }
  }
]

// 固定路由
const defaultRoutes = [
  {
    path: '/',
    name: 'personal',
    // component: () => import(/* webpackChunkName: "personal" */ '../views/personal'),
    redirect: '/biology/animal/bird'
  },
  {
    path: '/login',
    name: 'login',
    component: () => import(/* webpackChunkName: "login" */ '../views/login')
  },
  {
    path: '/register',
    name: 'register',
    component: () => import(/* webpackChunkName: "register" */ '../views/register')
  }
]

const allRoutes = [...asyncRoutes, ...defaultRoutes];

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

export default router

 

<template>
  <div class="aside">
    <div class="box">
      <t-menu
        v-model:expanded="expanded"
        theme="light"
        default-value="3-2"
        expand-mutex
        height="550px"
        :collapsed="collapsed"
        class="box_tab"
      >
        <template  v-for="item in asyncRoutes" :key="item.name">
          <t-submenu :value="item.meta.value" v-if="item.children">
            <template #icon>
              <t-icon :name="item.meta.icon" />
            </template>
            <template #title>
              <span>{{item.meta.title}}</span>
            </template>
            <template v-for="x in item.children" :key="x.name">
              <t-submenu :value="x.meta.value" :title="x.meta.title" v-if="x.children">
                <template v-for="y in x.children" :key="y.name">
                  <t-menu-item :value="y.meta.value">
                  {{y.meta.title}} 
                  </t-menu-item>
                </template>
                <!-- <t-menu-item value="3-1-2"> 三级菜单内容 </t-menu-item>
                <t-menu-item value="3-1-3"> 三级菜单内容 </t-menu-item> -->
              </t-submenu>
              <t-menu-item :value="x.meta.value" v-if="!x.children"> {{x.meta.title}} </t-menu-item>
            </template>
            <!-- <t-submenu value="3-5" title="二级菜单">
              <t-menu-item value="3-5-1"> 三级菜单内容 </t-menu-item>
              <t-menu-item value="3-5-2"> 三级菜单内容 </t-menu-item>
              <t-menu-item value="3-5-3"> 三级菜单内容 </t-menu-item>
            </t-submenu>
            <t-menu-item value="3-2"> 二级菜单内容 </t-menu-item>
            <t-menu-item value="3-3"> 二级菜单内容 </t-menu-item>
            <t-menu-item value="3-4"> 二级菜单内容 </t-menu-item> -->
          </t-submenu>
          <t-menu-item :value="item.meta.value" v-if="!item.children" >
            <template #icon>
              <t-icon :name="item.meta.icon" />
            </template>
            {{item.meta.title}}
          </t-menu-item>
          <!-- <t-menu-item value="user-circle">
            <template #icon>
              <t-icon name="user-circle" />
            </template>
            个人中心
          </t-menu-item>
          <t-submenu value="4">
            <template #icon>
              <t-icon name="play-circle" />
            </template>
            <template #title>
              <span>视频区</span>
            </template>
            <t-menu-item value="4-1"> 二级菜单内容 </t-menu-item>
            <t-menu-item value="4-2"> 二级菜单内容 </t-menu-item>
            <t-menu-item value="4-3"> 二级菜单内容 </t-menu-item>
          </t-submenu>
          <t-menu-item value="edit1">
            <template #icon>
              <t-icon name="edit-1" />
            </template>
            资源编辑
          </t-menu-item>-->
        </template>
          <template #operations>
            <t-icon
              class="t-menu__operations-icon"
              name="view-list"
              @click="changeCollapsed"
            />
          </template> 
      </t-menu>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { asyncRoutes } from "../../router";
console.log('222222',asyncRoutes.length)

const collapsed = ref(false);

const changeCollapsed = () => {
  collapsed.value = !collapsed.value;
};
const expanded = ref(["2", "3"]);
</script>

<style lang="scss" scoped>
.aside {
  width: 100%;
  height: 100%;
  .box {
    height: 94%;
    background-color: transparent;
    &_tab {
      background-color: #d1eeee;
    }
  }
}
</style>

主要修改点及效果

 

成功去除了不存在子菜单情况下右侧有箭头问题及去除了点击功能重复性（即点击其他项，第一项菜单也有反应）