新增菜单

介绍

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

新增菜单

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

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

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

   

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

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

   

新增一级菜单

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

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

   

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

   

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

   

新增多级菜单

多级菜单的操作与普通的二级菜单类似，首先需要创建一级目录，然后增加二级目录，相对应的在多级目录下创建菜单即可。

开启页面缓存

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

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