.Net导航菜单（选添）
写之前先认识导航菜单的作用：
在C#中，导航菜单通常用于创建用户界面，提供对应用程序中不同功能模块或页面的导航和访问。导航菜单的作用包括：
-
导航和定位：导航菜单可以帮助用户快速定位并切换到应用程序中的不同功能模块或页面，提供良好的用户体验。
-
组织结构：通过导航菜单，可以清晰地展示应用程序的功能结构和层次关系，使用户能够清晰地了解应用程序中各个功能的归属和关联。
-
快速操作：用户可以通过导航菜单快速进行功能的选择和操作，而无需深入到具体的界面或页面中。
-
UI美化：设计精美的导航菜单可以美化应用程序的用户界面，提升用户体验。
在实际应用中，导航菜单通常与其他界面元素（如工具栏、标签页等）结合使用，以提供完整的用户界面导航和操作功能。
了解之后就可以开始进行写代码了
首先需要创建一个表用于存储导航菜单的属性
/// <summary>
/// 菜单表
/// </summary>
[Table("Menu")]
/// <summary>
/// 菜单id
/// </summary>
public class Menu
{
[Key]
public int MenuId { get; set; }
/// <summary>
/// 菜单名称
/// </summary>
public string? MenuName { get; set; }
/// <summary>
/// 菜单Url
/// </summary>
public string? MenuUrl { get; set; }
/// <summary>
/// 父级id
/// </summary>
public int PId { get; set; }
}
生成表结构如下
| MenuId | MenuName | MenuUrl | PId |
| 1 | 用户管理 | 1 | 0 |
| 2 | 角色管理 | 1 | 0 |
| 3 | 权限管理 | 1 | 0 |
| 4 | 用户登录 | /LoginUser | 1 |
添加好数据之后级开始为了递归循环进行添加Dto表
表结构如下
/// <summary>
/// 菜单Dto
/// </summary>
public class MenuDto
{
public int MenuId { get; set; }
/// <summary>
/// 菜单名称
/// </summary>
public string? MenuName { get; set; }
/// <summary>
/// 菜单Url
/// </summary>
public string? MenuUrl { get; set; }
/// <summary>
/// 父级id
/// </summary>
public int PId { get; set; }
/// <summary>
/// 递归循环
/// </summary>
public List<MenuDto> ?MenuDtoList { get; set; }
}
创建完Dto的表之后，就可以写vs代码了
public List<MenuDto> ShowMent(int Pid)
{
var list = db.Menu.Where(x => x.PId == Pid).Select(x => new MenuDto
{
MenuId = x.MenuId,
MenuName = x.MenuName,
MenuUrl = x.MenuUrl,
PId = x.PId,
}).ToList();
foreach (var item in list)
{
item.MenuDtoList = ShowMent(item.MenuId);
}
return list.ToList();
}
后台代码写完后进行编写前台代码
一.先去Element-ui复制代码
1.去布局容器(Container)复制结构，选择哪个结构进行复制代码，通常选择第四个方案
代码如下：
<el-container>
<el-header>Header</el-header>
<el-container>
<el-aside width="200px">Aside</el-aside>
<el-main>Main</el-main>
</el-container>
</el-container>
2.复制导航菜单(NavMenu)代码,采用侧栏代码，导航菜单代码需要多少
<el-menu
default-active="2"
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose">
<el-submenu index="1">
<template slot="title">
<i class="el-icon-location"></i>
<span>导航一</span>
</template>
<el-menu-item-group>
<el-menu-item index="1-1">选项1</el-menu-item>
</el-menu-item-group>
</el-menu>
3.复制完之后进行修改成自己的数据，代码如下，并将Element-ui方法和样式复制下来（绿色是修改的，红色是添加的）
<el-container>
<el-header></el-header>
<el-container>
<el-aside width="200px">
<el-menu
default-active="2"
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose"
:router="true"
>
<el-submenu
v-for="(item, index) in menuList"
:key="index"
:index="item.menuUrl"
>
<template slot="title">
<i class="el-icon-location"></i>
<span>{{ item.menuName }}</span>
</template>
<el-menu-item-group>
<el-menu-item
v-for="(a, sindex) in item.menuDtoList"
:key="sindex"
:index="a.menuUrl"
>{{ a.menuName }}</el-menu-item
>
</el-menu-item-group>
</el-submenu>
</el-menu>
</el-aside>
<el-main>
<router-view></router-view>
</el-main>
</el-container>
</el-container>
4.随后将后台方法绑定到前台，并放在钩子函数中
ShowMenu() {
this.axios
.get("http://localhost:5064/api/User/ShowMent?Pid=0")
.then((res) => {
this.menuList = res.data;
});
},
导航菜单到此效果图出来了，但是只能跳转页面，不是在导航菜单里展示，是因为没有修改一下路径，代码如下
{
//动态菜单
path: '/MenuShow',
name: 'MenuShow',
component: () => import(/* webpackChunkName: "about" */ '../views/Menu/MenuShow.vue'),
children: [{
//用户登录
path: '/GetLogin',
name: 'GetLogin',
component: () => import(/* webpackChunkName: "about" */ '../views/User/GetLogin.vue')
},
{
//用户注册
path: '/PostUser',
name: 'PostUser',
component: () => import(/* webpackChunkName: "about" */ '../views/User/PostUser.vue')
},
{
//角色显示
path: '/RoleShow',
name: 'RoleShow',
component: () => import(/* webpackChunkName: "about" */ '../views/Role/RoleShow.vue')
},
{
//用户显示
path: '/UserShow',
name: 'UserShow',
component: () => import(/* webpackChunkName: "about" */ '../views/User/UserShow.vue')
},
]
},
将页面路由全部转为导航菜单的跳转下（格式一定要记住）。
到此导航菜单编写完毕
浙公网安备 33010602011771号