el-menu的default-active属性

项目

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"属性规定了菜单项激活时的颜色，由于用户列表是激活的，颜色是激活状态的颜色。那么如何改变激活状态呢？

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

路由配置是这样的

1[
2   {
3    path: '/',
4    name: 'Home',
5    component: () => import('../views/Home.vue'),
6    redirect: '/wellcome',
7    children: [
8      {
9        path: '/wellcome',
10        component: () => import('../components/WellCome.vue')
11      },
12      {
13        path: '/users',
14        component: () => import('../components/user/Users.vue')
15      },
16      {
17        path: '/goods',
18        component: () => import('../components/goods/Goods.vue')
19      },
20      {
21        path: '/goodscate',
22        component: () => import('../components/goods/GoodsCate.vue')
23      },
24      {
25        path: '/orders',
26        component: () => import('../components/order/Orders.vue')
27      },
28      {
29        path: '/statdata',
30        component: () => import('../components/statdata/StatData.vue')
31      }
32    ]
33  },
34  {
35    path: '/:catchAll(.*)',
36    name: '404',
37    component: () => import('../views/404.vue')
38  },
39  {
40    path: '/login',
41    name: 'LoginRegister',
42    component: () => import('../views/Login.vue')
43  }
44]

解决方案

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

1    <el-menu
2      :uniqueOpened="true"
3      class="el-menu-vertical-demo"
4      text-color="#fff"
5      background-color="#272727"
6      active-text-color="#ffd04b"
7      @open="handleOpen"
8      @close="handleClose"
9      :collapse="collapseMode"
10      :collapse-transition="false"
11      router
12      :default-active="activePath"
13    >
14      <!-- 一级菜单 -->
15      <el-submenu :index="item.id" v-for="item in menuList" :key="item.id">
16        <template #title>
17          <i :class="item.icon"></i>
18          <span>{{ item.name }}</span>
19        </template>
20        <!-- 二级菜单 -->
21        <el-menu-item :index="child.path" v-for="child in item.children" :key="child.id">
22          <template #title>
23            <i class="el-icon-menu"></i>
24            <span>{{ child.name }}</span>
25          </template>
26        </el-menu-item>
27      </el-submenu>
28    </el-menu>

setup

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

1import { onBeforeRouteUpdate } from 'vue-router'

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

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

左侧菜单栏数据

1// 左侧菜单数据
2const menuList = [
3  { id: '1', name: '用户管理', icon: 'el-icon-user', children: [{ id: '1-1', name: '用户列表', path: '/users' }] },
4  { id: '2', name: '商品管理', icon: 'el-icon-goods', children: [{ id: '2-1', name: '商品列表', path: '/goods' }, { id: '2-2', name: '商品分类', path: '/goodscate' }] },
5  { id: '3', name: '订单管理', icon: 'el-icon-s-order', children: [{ id: '3-1', name: '订单列表', path: '/orders' }] },
6  { id: '4', name: '数据统计', icon: 'el-icon-pie-chart', children: [{ id: '4-1', name: '统计信息', path: '/statdata' }] }
7]