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

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

前言

本次将教学怎么在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所指的是什么,需要理解的什么是路由地址,什么是菜单地址。

目录
打赏
0
0
0
0
14
分享
相关文章
Mock.js之Element-ui搭建首页导航与左侧菜单
Mock.js之Element-ui搭建首页导航与左侧菜单
117 0
【Element-UI】Mockjs及案例首页导航、左侧菜单
Mock.js是一个用于生成模拟数据的JavaScript库。它能够模拟后端API接口,用于前端开发时进行接口调试和测试提高自动化测试效率。使用Mock.js可以快速创建虚拟的数据,并且可以设置数据的类型、格式和规则,从而模拟真实的数据响应。Mock.js支持生成随机数据拦截Ajax请求以返回模拟数据支持RESTful API风格等功能,能够提高前端开发效率,并且减少对后端接口的依赖。支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。
Element UI搭建首页导航和左侧菜单以及Mock.js和(组件通信)总线的运用
Element UI搭建首页导航和左侧菜单以及Mock.js和(组件通信)总线的运用
133 0
【Element-UI】Mock.js,案例首页导航、左侧菜单
【Element-UI】Mock.js,案例首页导航、左侧菜单
123 0
关于element ui中引入官方的NavMenu时出现点击某个子菜单时,所有的子菜单全都展开问题
关于element ui中引入官方的NavMenu时出现点击某个子菜单时,所有的子菜单全都展开问题
376 0
vue element-ui 菜单管理使用图标选择器组件
vue element-ui 菜单管理使用图标选择器组件
796 0
【2】Vue项目引用Element UI(饿了么框架)菜单导航条初期配置
【2】Vue项目引用Element UI(饿了么框架)菜单导航条初期配置
【学生管理系统】element ui级联菜单bug
【学生管理系统】element ui级联菜单bug
117 0
【学生管理系统】element ui级联菜单bug

热门文章

最新文章

下一篇
oss创建bucket