egg框架下中间件中按钮显示当前状态（选中状态）

本文链接：https://blog.csdn.net/weixin_51231997/article/details/115871825

本文介绍如何在Egg.js框架中通过中间件实现菜单项的选中状态，包括中间件的创建与配置、使用Nunjucks模板引擎渲染选中状态，并展示具体的实现代码。

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

egg框架下中间件中显示当前状态（选中状态）
1、moddle中创建中间件文件
2、配置：config/config.default.js中进行配置

module.exports = (option, app) => {
    return async (ctx, next) => {
        let menus = [{
            name: "主面板",
            icon: "fe-home",
            url: "/admin"
        }, {
            name: "用户管理",
            icon: "fe-user-plus",
            url: "/admin/user"
        }]
        //挂载在local中   ctx.locals.sidebar = menus
        //active当前选中状态
        ctx.locals.sidebar = menus.map(item => {
            if (
                (ctx.request.url === '/admin' 
                && item.url === '/admin') 
                || (ctx.request.url.startsWith(item.url)
                && ctx.request.url != '/admin')
                &&item.url !== '/admin') 
                {
                item.active = 'active'
            }
            return item
        })
        await next();
    }
}

3、利用egg指定模板引擎Nunjuck进行对HTML文件进行渲染
创建view文件夹，里面创建要渲染的html文件

<div id="sidebar-menu" class="sidebar-menu">
   <ul>
   {% for item in ctx.locals.sidebar %}
		<li class = "{{item.active}}">  //active选中状态
			<a href="{{ item.url }}"><i class="fe {{ item.icon }}"></i> <span>{{item.name}}</span></a>
				</li>
    {% endfor %}
		</ul>
	 </div>