注意事项

1. 所有涉及菜单的组件，都需要传index属性，否则不会正常展示

MyMenuItem.vue组件的实现

1. item 没有子节点：直接使用el-menu-item展示item本身
2. item 有子节点：
   • 使用el-sub-menu
   • item.meta.title作为标题
   • 递归MyMenuItem.vue组件对item.children属性遍历

图标使用

iconify

点击菜单跳转路由

el-menu

default-active

页面加载时默认激活菜单的 index

el-sub-menu

标题

index属性

唯一标志，必填

自定义外部 & 内部链接组件

这个组件定义了一个名为 AppLink 的动态链接组件，根据 props.to 的值决定渲染成外部链接 <a> 还是内部路由链接 <router-link>。

让我们逐步解析：

1. 模板部分 (<template>):

   1 2 3 4 5

   <template> <component :is="linkType" v-bind="linkProps(to)"> <slot></slot> </component> </template>

   • component 组件根据 linkType 动态地渲染为 linkType 的值，可以是 "a" 或 "router-link"。
   • v-bind="linkProps(to)" 将 linkProps 函数返回的属性动态绑定到 component 组件上。
   • <slot></slot> 用于插入组件的内容。

2. 设置部分 (<script setup lang="ts">):

   • defineOptions 用于定义组件选项，这里设置了组件的名称为 "AppLink"，并且禁用了继承的属性绑定（inheritAttrs: false）。

   • 导入与计算属性:

     • import { isExternal } from "@/utils/index"; 导入了一个名为 isExternal 的工具函数。
     • defineProps 定义了组件的属性 to，类型为 Object，且必需。
     • computed 属性 isExternalLink 根据 props.to.path 的值来判断是否为外部链接。

   • 计算属性与函数:

     • isExternalLink 是一个计算属性，根据 props.to.path 是否为空或者属于外部链接，决定返回 true 或 false。
     • linkType 是一个计算属性，根据 isExternalLink 的值决定返回 "a" 或 "router-link"，从而确定要渲染的具体的 HTML 元素类型。
     • linkProps 是一个函数，接收一个 to 参数，根据 isExternalLink 的值返回相应的属性对象，用于 <a> 或 <router-link> 的设置。

综上所述，这个组件根据传入的 to 属性值，动态地决定是渲染成外部链接 <a> 还是内部路由链接 <router-link>，并根据这个决定设置相应的属性。