新增菜单

介绍

本章节介绍了如何在 vue3-element-admin 项目中进行菜单操作，包括如何新增菜单、创建一级菜单和多级菜单，以及如何开启页面缓存功能。

新增菜单

在系统中，菜单通常呈现为目录 + 菜单的二级结构。首先需要创建一个目录，然后在该目录下添加菜单。

1. 新增目录：首先需要在系统中新增一个目录。

   选择顶级菜单作为父级菜单，设置菜单名称（可以随意填写），并选择“目录”作为菜单类型。路由路径需要以 / 开头。其他使用默认设置即可。

   

2. 新增菜单：在目录下新增一个菜单。

   选择刚添加的目录作为父级菜单，填写菜单名称、路由名称和路由路径，并确保组件路径与页面组件的实际路径一致。然后配置显示状态和排序值即可。

   

新增一级菜单

系统支持创建一级目录和其下的二级菜单，但不直接支持将一级菜单作为根菜单。如果您希望将菜单显示为一级菜单，可以按照以下步骤进行操作：

1. 添加一级目录：创建一个一级目录，并将“始终显示”选项设置为否。这样，后续添加的菜单将不显示在目录下，而是作为唯一的子菜单显示，呈现为一级菜单。

   

2. 添加子菜单：在刚才创建的目录下，添加子菜单。

   

3. 效果展示：最终效果如下，一级菜单已成功显示。

   

新增多级菜单

多级菜单的操作与普通的二级菜单类似，首先需要创建目录，并在目录下添加菜单。不同之处在于，您需要在中间的菜单页面添加 <router-view /> 作为路由出口，以支持多级嵌套的路由跳转。

1. 新增目录与菜单：与普通菜单类似，先创建目录，再添加子菜单。

2. 添加路由出口：在中间菜单页面中，您需要添加 <router-view />，用来作为路由的出口，承载子菜单内容。

   <!-- demo/multi-level/level1 -->
   <template>
     <div>
       <el-alert :closable="false" title="菜单一级">
         <!-- 关键：路由出口 -->
         <router-view />
       </el-alert>
     </div>
   </template>

   通过这样的设置，子菜单将在 <router-view /> 内显示。

开启页面缓存

项目支持二级菜单页面的缓存（keep-alive）。为了启用缓存，您需要确保菜单开启缓存功能，且路由名称与组件页面的 name 属性一致。

1. 开启缓存：确保菜单开启了缓存选项。
2. 匹配路由名称：确保菜单的路由名称与组件页面中定义的 name 属性一致。