elementui 选中子页面时,保持左侧导航中父级的激活状态 :default-active=“activeMenu“

在这里插入图片描述
如上图,比如说:当前选中的页面为“商户统计”,对应的路由为/total,当点击明细后,打开一个新的页面,路由为/detail,此时“商户统计”会失去选中的状态。
现在需求为,打开明细页面后,商户统计仍保持选中状态。

代码修改

导航页面组件: Sidebar/index.vue
为了方便查看,el-menu中的其他属性我都去掉了,只留下了相关的:default-active="activeMenu"

    <el-scrollbar wrap-class="scrollbar-wrapper">
      <el-menu
        :default-active="activeMenu"
      >
        <!-- SidebarItem组件 -->
        <sidebar-item v-for="route in permission_routes" :key="route.path" :item="route" :base-path="route.path" />
      </el-menu>
    </el-scrollbar>
    activeMenu() {
      const route = this.$route
      const { meta, path } = route
      // if set path, the sidebar will highlight the path you set
      if (meta.activeMenu) {
        return meta.activeMenu
      }
      return path
    },

从上面这个activeMenu方法可以看到meta.activeMenu这个属性,所以去配置子路由的页面,给meta加上这个属性即可。

  {
    path: '/detail',//明细页面
    component: Layout,
    children: [
      {
        path: 'index',
        component: () => import('@/views/detail/index'), 
        name: 'detail',
        meta: {
          title: '明细',
          activeMenu: '/total' // 保持导航中“商户统计”的激活状态

        },
        hidden: true
      }
    ]
  },

default-active为当前激活菜单的 index。项目中取值为当前菜单的路由,且给el-submenuel-menu-item的index属性配的也是对应菜单的路由,保持一致。

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值