如何在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所指的是什么,需要理解的什么是路由地址,什么是菜单地址。

目录
相关文章
|
7月前
|
JSON 前端开发 Java
Mock.js之Element-ui搭建首页导航与左侧菜单
Mock.js之Element-ui搭建首页导航与左侧菜单
53 0
|
9月前
|
JSON 前端开发 JavaScript
【Element-UI】Mockjs及案例首页导航、左侧菜单
Mock.js是一个用于生成模拟数据的JavaScript库。它能够模拟后端API接口,用于前端开发时进行接口调试和测试提高自动化测试效率。使用Mock.js可以快速创建虚拟的数据,并且可以设置数据的类型、格式和规则,从而模拟真实的数据响应。Mock.js支持生成随机数据拦截Ajax请求以返回模拟数据支持RESTful API风格等功能,能够提高前端开发效率,并且减少对后端接口的依赖。支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。
|
8月前
|
JSON 前端开发 JavaScript
Element UI搭建首页导航和左侧菜单以及Mock.js和(组件通信)总线的运用
Element UI搭建首页导航和左侧菜单以及Mock.js和(组件通信)总线的运用
70 0
|
1月前
|
JSON 前端开发 JavaScript
【Element-UI】Mock.js,案例首页导航、左侧菜单
【Element-UI】Mock.js,案例首页导航、左侧菜单
60 0
|
8月前
|
人工智能 自然语言处理 语音技术
关于element ui中引入官方的NavMenu时出现点击某个子菜单时,所有的子菜单全都展开问题
关于element ui中引入官方的NavMenu时出现点击某个子菜单时,所有的子菜单全都展开问题
90 0
|
8月前
|
JavaScript
vue element-ui 菜单管理使用图标选择器组件
vue element-ui 菜单管理使用图标选择器组件
177 0
|
8月前
|
前端开发 JavaScript 测试技术
SAP 电商云 Spartacus UI 的自定义 hamburger 菜单
SAP 电商云 Spartacus UI 的自定义 hamburger 菜单
|
10月前
|
JSON JavaScript 前端开发
【2】Vue项目引用Element UI(饿了么框架)菜单导航条初期配置
【2】Vue项目引用Element UI(饿了么框架)菜单导航条初期配置
Element UI - el-select(选择器)下拉多选菜单不换行显示
Element UI - el-select(选择器)下拉多选菜单不换行显示