设置router-link样式-使用a

设置样式图一变成图二

核心代码（ps a前面没有.）

有router-link 设置样式就用a就可以

a{
    //background-color: #545c64;
    color: white;
    text-decoration: none; //去掉下划线
    &:hover {
      color: #00ce41;
      //background-color: #545c64;
    }
  }

完整代码

<template>
  <div>
    <el-menu
        active-text-color="#ffd04b"
        background-color="#545c64"
        class="el-menu-vertical-demo"
        default-active="1"
        text-color="#fff"
        @open="handleOpen"
        @close="handleClose"
    >
      <el-sub-menu index="1">
        <template #title>
          <el-icon><location /></el-icon>
          <span>管理</span>
        </template>

          <el-menu-item index="1-1">
            <router-link class="router_active" :to="{path:'/'}">
              <span class="side-sp">用户管理</span>
            </router-link>
          </el-menu-item>
          <el-menu-item index="1-2">
            <router-link class="router_active" :to="{path:'/category'}">
              <span class="side-sp">分类管理</span>
            </router-link>
          </el-menu-item>
          <el-menu-item index="1-3">
            <router-link class="router_active" :to="{path:'/picture'}">
              <span class="side-sp">图片管理</span>
            </router-link>
          </el-menu-item>

      </el-sub-menu>
    </el-menu>
  </div>
</template>

<script setup lang="ts">
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
</script>

<style scoped lang="scss">
.el-menu-item{
  color: #fff;
  a{
    //background-color: #545c64;
    color: white;
    text-decoration: none; //去掉下划线
    &:hover {
      color: #00ce41;
      //background-color: #545c64;
    }
  }
  }



</style>