el-menu在一级导航跳转其他页面后,一级导航保持高亮

先上效果图,在只有一级导航的情况下,跳转到其他页面的时候,一级导航保持高亮。

代码实现:主要思路是,在写路由的时候,给跳转的路由在meta中加上activeMenu,这activeMenu即一级导航需要保持高亮的路由地址,然后在el-menu组件中添加default-active,即如果跳转的路由有activeMenu的话,就让这activeMenu保持高亮,如果没有则让跳转的页面高亮。

<el-menu
    :default-active="activeMenu"
    :collapse="isCollapse"
    class="el-menu-vertical-demo"
    text-color="#ffffff"
    :unique-opened="true"
    :active-text-color="settings.theme"
    :collapse-transition="false"
    mode="vertical"
    :router="true"
  >
activeMenu() {
            const route = this.$route;
            const { meta, path } = route;
            if (meta.activeMenu) {
                return meta.activeMenu;
            }
            return path;
        },

 

 

 

 

  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要实现el-menu二级菜单选中后一级菜单也高亮,可以通过以下步骤: 1. 在el-menu组件上设置default-active属性,将一级菜单的默认选中项设置为需要高亮一级菜单。 ```vue <el-menu default-active="home"> <!-- 菜单项 --> </el-menu> ``` 2. 在二级菜单el-menu-item-group中使用index属性绑定一级菜单的值,当二级菜单被选中时,通过index将选中项的值传递给一级菜单进行高亮。 ```vue <el-menu default-active="home"> <el-menu-item group-title="Home" index="home">首页</el-menu-item> <el-menu-item-group title="分类"> <el-menu-item index="food">美食</el-menu-item> <el-menu-item index="travel">旅行</el-menu-item> </el-menu-item-group> </el-menu> ``` 3. 在computed计算属性中定义一个值,当二级菜单被选中时将index的值赋给这个属性,在一级菜单的class属性中绑定这个计算属性,并根据是否和选中项的值相等来决定是否高亮。 ```vue <el-menu default-active="home"> <el-menu-item :class="{'active': activeItem === 'home'}" index="home">首页</el-menu-item> <el-menu-item-group title="分类"> <el-menu-item :class="{'active': activeItem === 'food'}" index="food">美食</el-menu-item> <el-menu-item :class="{'active': activeItem === 'travel'}" index="travel">旅行</el-menu-item> </el-menu-item-group> </el-menu> ``` ```javascript exports default { computed: { activeItem() { return this.$route.query && this.$route.query.index } } } ``` 通过以上步骤,当选中二级菜单时,一级菜单对应的项也会高亮显示。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值