colexiu-project/src/views/student-info/components/user-menu/index.tsx

import { defineComponent } from 'vue'
import { RouterLink } from 'vue-router'
import styles from './index.module.less'

export const getAssetsHomeFile = (fileName: string) => {
  const path = `./images/${fileName}`
  const modules = import.meta.globEager('./images/*')
  return modules[path].default
}
// 个人中心默认地址
const defaultRoute = 'studentInfo'

export default defineComponent({
  name: 'user-menu',
  data() {
    return {}
  },
  computed: {
    activeRoute() {
      return this.$route.name
    },
    acitveMenuRoute() {
      return this.$route.meta.activeMenu
    },
    menuList() {
      const hasRoute = this.$router.hasRoute(defaultRoute)
      // 判断是否有个人中心的菜单
      if (!hasRoute) {
        return
      }
      const allRouter = this.$router.getRoutes()
      const userInfoRouter = allRouter.find(item => item.name === defaultRoute)
      const list: any = []
      userInfoRouter?.children.forEach((item: any) => {
        if (!item.meta.hidden) {
          list.push(item)
        }
      })
      return list
    }
  },
  render() {
    return (
      <div class="bg-white rounded-[6px] text-center py-6 px-[18px] flex items-center flex-col">
        {this.menuList.map((item: any) => (
          <RouterLink
            to={item.path}
            class={[
              'py-2 px-6 mb-1.5 flex items-center text-base text-[#666] w-full last:mb-0 cursor-pointer',
              styles.menuItem,
              (item.name === this.activeRoute ||
                item.name === this.acitveMenuRoute) &&
                styles.active
            ]}
          >
            <i class={['w-7 h-7 mr-3.5', styles['icon' + item.meta.index]]}></i>
            {item.meta.title}
          </RouterLink>
        ))}
      </div>
    )
  }
})