项目

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' }] }
]