el-menu的default-active属性

烽烟
• 阅读 1283

项目

element-plus

官方描述

当前激活菜单的 index

问题描述

后台项目,左侧菜单如下

  • 用户管理
    • 用户列表
  • 商品管理
    • 商品列表
    • 商品分类
  • 订单管理
    • 订单列表
  • 数据统计
    • 统计信息

菜单外层是<el-menu>

一级菜单用的是<el-submenu>

二级菜单项用的是<el-menu-item>

<el-menu router>router属性开启了路由,当点击了二级菜单比如用户列表<el-menu-item>,<el-menu-item>,的index属性规定了激活的路由,如果index='/users'则会跳转到/users的路由。

但是这里有个坑:

比如右边即Users.vue有个面包屑导航区代码如下,结合下面的路由配置,可知点击首页会跳转到路由/wellcome但是用户列表仍然处于激活状态【问题】<el-menu>active-text-color="#ffd04b"属性规定了菜单项激活时的颜色,由于用户列表是激活的,颜色是激活状态的颜色。那么如何改变激活状态呢?

<!-- 面包屑导航区 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>

路由配置是这样的

[
   {
    path: '/',
    name: 'Home',
    component: () => import('../views/Home.vue'),
    redirect: '/wellcome',
    children: [
      {
        path: '/wellcome',
        component: () => import('../components/WellCome.vue')
      },
      {
        path: '/users',
        component: () => import('../components/user/Users.vue')
      },
      {
        path: '/goods',
        component: () => import('../components/goods/Goods.vue')
      },
      {
        path: '/goodscate',
        component: () => import('../components/goods/GoodsCate.vue')
      },
      {
        path: '/orders',
        component: () => import('../components/order/Orders.vue')
      },
      {
        path: '/statdata',
        component: () => import('../components/statdata/StatData.vue')
      }
    ]
  },
  {
    path: '/:catchAll(.*)',
    name: '404',
    component: () => import('../views/404.vue')
  },
  {
    path: '/login',
    name: 'LoginRegister',
    component: () => import('../views/Login.vue')
  }
]

解决方案

由如下代码可知,<el-menu-item :index="child.path"path表示点击时激活的路由,而我们现在做的是要同步以下路由,我们要改变的是<el-menu>:default-active="activePath"属性

    <el-menu
      :uniqueOpened="true"
      class="el-menu-vertical-demo"
      text-color="#fff"
      background-color="#272727"
      active-text-color="#ffd04b"
      @open="handleOpen"
      @close="handleClose"
      :collapse="collapseMode"
      :collapse-transition="false"
      router
      :default-active="activePath"
    >
      <!-- 一级菜单 -->
      <el-submenu :index="item.id" v-for="item in menuList" :key="item.id">
        <template #title>
          <i :class="item.icon"></i>
          <span>{{ item.name }}</span>
        </template>
        <!-- 二级菜单 -->
        <el-menu-item :index="child.path" v-for="child in item.children" :key="child.id">
          <template #title>
            <i class="el-icon-menu"></i>
            <span>{{ child.name }}</span>
          </template>
        </el-menu-item>
      </el-submenu>
    </el-menu>

setup

在setup中做路由监听,引入onBeforeRouteUpdate

import { onBeforeRouteUpdate } from 'vue-router'

监听,当路由改变时把路由传给这个属性,大功告成

// 菜单激活的路由
const activePath = ref<string>('')
// 路由监听
onBeforeRouteUpdate((to) => {
  activePath.value = to.path
})

左侧菜单栏数据

// 左侧菜单数据
const menuList = [
  { id: '1', name: '用户管理', icon: 'el-icon-user', children: [{ id: '1-1', name: '用户列表', path: '/users' }] },
  { id: '2', name: '商品管理', icon: 'el-icon-goods', children: [{ id: '2-1', name: '商品列表', path: '/goods' }, { id: '2-2', name: '商品分类', path: '/goodscate' }] },
  { id: '3', name: '订单管理', icon: 'el-icon-s-order', children: [{ id: '3-1', name: '订单列表', path: '/orders' }] },
  { id: '4', name: '数据统计', icon: 'el-icon-pie-chart', children: [{ id: '4-1', name: '统计信息', path: '/statdata' }] }
]
点赞
收藏
评论区
推荐文章
秃头王路飞 秃头王路飞
2个月前
webpack5手撸vue2脚手架
webpack5手撸vue相信工作个12年的小伙伴们在面试的时候多多少少怕被问到关于webpack方面的知识,本菜鸟最近闲来无事,就尝试了手撸了下vue2的脚手架,第一次发帖实在是没有经验,望海涵。languageJavaScript"name":"vuecliversion2","version":"1.0.0","desc
浅梦一笑 浅梦一笑
2个月前
初学 Python 需要安装哪些软件?超级实用,小白必看!
编程这个东西是真的奇妙。对于懂得的人来说,会觉得这个工具是多么的好用、有趣,而对于小白来说,就如同大山一样。其实这个都可以理解,大家都是这样过来的。那么接下来就说一下python相关的东西吧,并说一下我对编程的理解。本人也是小白一名,如有不对的地方,还请各位大神指出01名词解释:如果在编程方面接触的比较少,那么对于软件这一块,有几个名词一定要了解,比如开发环
光头强的博客 光头强的博客
2个月前
Java面向对象试题
1、请创建一个Animal动物类,要求有方法eat()方法,方法输出一条语句“吃东西”。创建一个接口A,接口里有一个抽象方法fly()。创建一个Bird类继承Animal类并实现接口A里的方法输出一条有语句“鸟儿飞翔”,重写eat()方法输出一条语句“鸟儿吃虫”。在Test类中向上转型创建b对象,调用eat方法。然后向下转型调用eat()方
刚刚好 刚刚好
2个月前
css问题
1、在IOS中图片不显示(给图片加了圆角或者img没有父级)<div<imgsrc""/</divdiv{width:20px;height:20px;borderradius:20px;overflow:h
blmius blmius
1年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
小森森 小森森
2个月前
校园表白墙微信小程序V1.0 SayLove -基于微信云开发-一键快速搭建,开箱即用
后续会继续更新,敬请期待2.0全新版本欢迎添加左边的微信一起探讨!项目地址:(https://www.aliyun.com/activity/daily/bestoffer?userCodesskuuw5n)\2.Bug修复更新日历2.情侣脸功能大家不要使用了,现在阿里云的接口已经要收费了(土豪请随意),\\和注意
晴空闲云 晴空闲云
2个月前
css中box-sizing解放盒子实际宽高计算
我们知道传统的盒子模型,如果增加内边距padding和边框border,那么会撑大整个盒子,造成盒子的宽度不好计算,在实务中特别不方便。boxsizing可以设置盒模型的方式,可以很好的设置固定宽高的盒模型。盒子宽高计算假如我们设置如下盒子:宽度和高度均为200px,那么这会这个盒子实际的宽高就都是200px。但是当我们设置这个盒子的边框和内间距的时候,那
艾木酱 艾木酱
1个月前
快速入门|使用MemFire Cloud构建React Native应用程序
MemFireCloud是一款提供云数据库,用户可以创建云数据库,并对数据库进行管理,还可以对数据库进行备份操作。它还提供后端即服务,用户可以在1分钟内新建一个应用,使用自动生成的API和SDK,访问云数据库、对象存储、用户认证与授权等功能,可专
Stella981 Stella981
1年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Wesley13 Wesley13
1年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
helloworld_28799839 helloworld_28799839
2个月前
常用知识整理
Javascript判断对象是否为空jsObject.keys(myObject).length0经常使用的三元运算我们经常遇到处理表格列状态字段如status的时候可以用到vue
烽烟
烽烟
Lv1
挥一挥青袖,陌上一抹云霞,静侯氤氲斑驳的光影,聆听如约的欢歌与清鸣,默在时光深处,细嗅花儿的清香,愿光与温馨,沐浴在心灵
2
文章
0
粉丝
1
获赞