:::danger 一二级菜单的异同
1级菜单的菜单组件要写 Layout 然后2级的要写 views/nav/index
1级菜单要填写跳转菜单，2级菜单不用填写跳转菜单
1级菜单不需要选择所属上级，也不需要填写页面链接，2级菜单必须选择所属上级并填写页面链接 :::

一、自定义1级菜单

:::tips 就算只有一个页面，一级菜单也必须配一个二级菜单，只有一个菜单的时候可以把一级和二级的菜单名称配成一样的，添加一级菜单时菜单组件这一个框会默认会显示成views/nav/index，要修改成Layout :::

  • 所属上级：不用选，直接跳过
  • 菜单名称：可以自定义
  • 菜单图标：el-icon-platform-eleme 图标从这个地址获取 https://element.eleme.cn/#/zh-CN/component/icon
  • 菜单路径：/aaa/ 这个大家可以随便写
  • 菜单组件：Layout 这个是固定的，不能修改
  • 跳转菜单：/aaa/bbb 这里要写2级菜单的菜单路径
  • 页面链接：不用填写

image.png

二、自定义2级菜单

:::tips 2级菜单路径要填写到1级的跳转菜单，2级菜单不用填写跳转菜单，1级菜单名称边上显示的图标是第1个2级菜单的图标 :::

  • 所属上级：1级菜单名称
  • 菜单名称：可以自定义
  • 菜单图标：el-icon-platform-eleme 图标从这个地址获取 https://element.eleme.cn/#/zh-CN/component/icon
  • 菜单路径：/aaa/bbb/ 这个大家可以随便写
  • 菜单组件：views/nav/index 这个是固定的，不能修改
  • 跳转菜单：2级菜单不用填写跳转菜单
  • 页面链接：https://mall.liangjianyun.com/ 这个大家可以自定义成自己想要展示的页面链接

image.png

三、效果截图

:::tips 这是教程中使用的演示数据生成的菜单效果截图，2级菜单有多个时会显示出左侧导航用于切换多个2级菜单 ::: image.png