element admin 重复点击左侧菜单栏刷新右侧界面

本文介绍了一个Vue项目的优化实践,通过在父组件`<app-main>`中使用`v-if`结合`isRouterAlive`状态来控制组件的重新加载。当在子组件`layoutIndexLeft.vue`中触发`handleSelect`方法时,利用`provide/inject`来调用父组件的`reload`方法,实现页面局部刷新,避免全页面重新渲染。这一技巧有助于提高应用性能并保持用户体验的流畅。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

"/src/layout/index.vue"<app-main>组件里面增加代码,<app-main v-if="isRouterAlive">,isRouterAlive的默认值为true。

index.vue的methods里面增加一个reload()方法
reload() {
	this.isRouterAlive = false;
	this.$nextTick(function() {
		this.isRouterAlive = true;
	})
}

使用provide()将reload()方法传递到子组件里面

provide() {
	return {
		reload: this.reload;
	}
},
data() {
	return {
		isRouterAlive: true;
	}
}
下面的代码为子组件layoutIndexLeft.vue的代码
<!-- 在el-menu 的标签里面增加@select="handleSelect"的方法 -->
<el-menu 
	:background-color="variables.menuBg"	
	……
	@select="handleSelect">
</el-menu>
因为在父组件里面使用了provide将reload方法放出来了,所以使用inject将reload方法接收
inject: ["reload"],
methods: {
	handleSelect(index) {
		if (index === this.$route.path) {
			this.relaod();	
			// 此reload方法为父组件的代码
			// 这里执行了会导致父组件的isRouterAlive改变
			// 所以v-if会让<app-main>标签重新加载
		}
	}
}
@using HengJiuGamesManage.Models; @{ Layout = null; } @{ Users users = new Users(); if(ViewBag.UserModel != null) { users = ViewBag.UserModel; } } <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>恒久游戏管理系统</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="~/Scripts/layui/css/layui.css" rel="stylesheet" /> <script src="~/Scripts/jquery-3.4.1.js"></script> <style> .layui-footer { display: flex; justify-content: center; } </style> </head> <body> <div class="layui-layout layui-layout-admin"> <div class="layui-header"> <div class="layui-logo layui-hide-xs layui-bg-black">恒久游戏管理系统</div> <!-- 头部区域(可配合layui 已有的水平导航) --> <ul class="layui-nav layui-layout-left"> <!-- 移动端显示 --> @*<li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft"> <i class="layui-icon layui-icon-spread-left"></i> </li> <li class="layui-nav-item layui-hide-xs"><a href="javascript:;">nav 1</a></li> <li class="layui-nav-item layui-hide-xs"><a href="javascript:;">nav 2</a></li> <li class="layui-nav-item layui-hide-xs"><a href="javascript:;">nav 3</a></li> <li class="layui-nav-item"> <a href="javascript:;">nav groups</a> <dl class="layui-nav-child"> <dd><a href="javascript:;">menu 11</a></dd> <dd><a href="javascript:;">menu 22</a></dd> <dd><a href="javascript:;">menu 33</a></dd> </dl> </li>*@ </ul> <ul class="layui-nav layui-layout-right"> <li class="layui-nav-item layui-hide layui-show-sm-inline-block"> <a href="javascript:;"> <img src="//unpkg.com/outeres@0.0.10/img/layui/icon-v2.png" class="layui-nav-img"> @users.UserName </a> <dl class="layui-nav-child"> <dd><a href="javascript:;" onclick="ModifyInfo()">个人资料</a></dd> @*<dd><a href="javascript:;">注销账号</a></dd>*@ <dd><a href="javascript:;" onclick="Exit()">退出登录</a></dd> </dl> </li> <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect> <a href="javascript:;"> <i class="layui-icon layui-icon-more-vertical"></i> </a> </li> </ul> </div> <div class="layui-side layui-bg-black"> <div class="layui-side-scroll"> <!-- 左侧导航区域(可配合layui已有的垂直导航) --> <ul class="layui-nav layui-nav-tree" lay-filter="test"> <li class="layui-nav-item layui-nav-itemed"> <a class="" href="javascript:;">游戏大类</a> <dl class="layui-nav-child"> <dd><a href="javascript:;">王者荣耀</a></dd> <dd><a href="javascript:;">永劫无间</a></dd> <dd><a href="javascript:;">三角洲行动</a></dd> <dd><a href="javascript:;">解限机</a></dd> </dl> </li> <li class="layui-nav-item"> <a href="javascript:;">权限管理</a> <dl class="layui-nav-child"> <dd><a href="javascript:;">普通用户</a></dd> <dd><a href="javascript:;">管理员</a></dd> <dd><a href="javascript:;">超级管理员</a></dd> </dl> </li> <li class="layui-nav-item"><a href="javascript:;">帮助</a></li> </ul> </div> </div> <div class="layui-body"> <!-- 内容主体区域 --> <div style="padding: 15px;"> <blockquote class="layui-elem-quote layui-text"> Layui 框体布局内容主体区域 </blockquote> <div class="layui-card layui-panel"> <div class="layui-card-header"> 下面是充数内容,为的是出现滚动条 </div> <div class="layui-card-body"> </div> </div> <br><br> </div> </div> <div class="layui-footer" style="justify-content: center;"> <!-- 底部固定区域 --> Copyright © 2025 Layui MIT Licensed 免责声明开源协议 在线测试 广告赞助 静态主题 </div> </div> <script src="~/Scripts/layui/layui.js"></script> <script> //JS layui.use(['element', 'layer', 'util'], function () { var element = layui.element; var layer = layui.layer; var util = layui.util; var $ = layui.$; //头部事件 util.event('lay-header-event', { menuLeft: function (othis) { // 左侧菜单事件 layer.msg('展开左侧菜单的操作', { icon: 0 }); }, menuRight: function () { // 右侧菜单事件 layer.open({ type: 1, title: '公告', content: '<div style="padding: 15px;">公告1</div>', area: ['260px', '100%'], offset: 'rt', // 右上角 anim: 'slideLeft', // 从右侧抽屉滑出 shadeClose: true, scrollbar: false }); } }); }); //退出 function Exit() { $.ajax({ url:"/Home/ExitSession", type: "post", success: function (res) { if (res.code == 0) { layer.msg(res.msg, { icon: 6, time: 2000 }, function () { window.location.href = "/Login/Index"; }) } else { layer.msg(res.msg, { icon: 5, time: 2000 }); } } }) } function ModifyInfo() { layer.open({ type: 2, // page 层类型 area: ['669px', '638px'], title: '资料修改', shade: 0.5, // 遮罩透明度 shadeClose: false, // 点击遮罩区域,关闭弹层 maxmin: false, // 允许全屏最小化 anim: 0, // 0-6 的动画形式,-1 不开启 content: '/Home/ModifyBaseInfo' }); } </script> </body> </html>这个页面是管理系统登陆后的主页面,上面的是一个点击后出现下拉列表,目标是可以进行修改资料,修改密码,以及退出登录,但现在我的代码中下拉中缺少修改密码,以及把修改密码写在修改个人资料里面 ,请你进行优化
最新发布
07-08
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值