Element UI 菜单高亮设置

其实这个功能在element ui官方文档中有写
在这里插入图片描述
在这里插入图片描述
其实主要是这两个属性

		<el-menu
                :default-active="$route.path"
                router>
            <el-submenu index="1">
                <template slot="title">
                    <span>菜单栏</span>
                </template>
                <el-menu-item index="/">菜单1</el-menu-item>
                <el-menu-item index="/SetWarningMsg">菜单2</el-menu-item>
            </el-submenu>
        </el-menu>

index="/SetWarningMsg":default-active="$route.path"对应上的时候就会显示高亮了~

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Element-UI是一套基于Vue.js 2.0的桌面端组件库,其中包括了侧边栏组件。在使用Element-UI的侧边栏组件时,可能会遇到侧边栏高亮的问题。具体表现为按F5刷新页面后,导航栏默认折叠起来,并且无高亮显示;点击浏览器的前进后退按钮后,高亮显示与页面内容不同步。解决这个问题的方法有两种: 1. 按F5刷新高亮问题:可以在侧边栏组件中设置default-active属性,将其值设置为当前路由的path,这样在刷新页面后,侧边栏会自动高亮当前路由对应的菜单项。 2. 前进后退后高亮不同步问题:可以使用Element-UI提供的router模式,将el-menu组件的router属性设置为true,然后将router-link标签上的path属性赋值给el-menu-item组件的index属性,这样在前进后退时,侧边栏会自动高亮当前路由对应的菜单项。 下面是一个使用router模式解决侧边栏高亮问题的代码示例: ``` <el-menu class="el-menu-vertical-demo" :default-active="$route.path" router> <el-menu-item index="/home/index"> <i class="el-icon-s-platform"></i> <span slot="title">数据统计</span> </el-menu-item> <el-menu-item index="/CorporateManagement/Gongsiguanli"> <i class="el-icon-office-building"></i> <span slot="title">公司管理</span> </el-menu-item> <el-menu-item index="/JieKouGL/InterfaceManagement"> <i class="el-icon-s-operation"></i> <span slot="title">接口管理</span> </el-menu-item> </el-menu> ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值