如何在bootAdmin-ui中新建顶部菜单及页面跳转

Posted 2021-11-06 算法与编程之美

本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。

前言

本次将教学怎么在bootAdmin-ui中新建一个顶部菜单及实现页面跳转。

问题描述

1.打开bootAdimin-ui项目，找到路径为src/menu/modules的文件，新建一个js文件。（在此以demo-massage命名）

2.打开新建文件，输入exportdefault {}，然后在括号里分别填写path、title、icon变量。值得注意的是，path中是在项目中view文件夹中的bootAdmin为起点，找到目标文件夹即可（即路由地址）。示例如下：

3.在view中的目标文件夹中如果存在子文件夹，则就需要children变量，在icon后填写children变量格式为:children：[],同样的也需要在children变量里写path、title、icon变量，注意：在这里的path就不是以bootAdmin为起点了，而是菜单地址。示例如下：

4.完成以上步骤后，找到项目中的路径为src/menu/modules的index.js文件，在顶部菜单的部分，加入刚才新建文件的名字，这里填入demo-massage。

5.运行项目，就可以看到顶部菜单和实现页面跳转啦！

结语

顶部菜单的制作并不复杂，真正需要动脑袋的是怎么去配置跳转路由，值得注意的是，在新建文件中path所指的是什么，需要理解的什么是路由地址，什么是菜单地址。

实习编辑：衡辉

稿件来源：深度学习与文旅应用实验室（DLETA）