设置router-link样式-使用a

设置样式图一变成图二

核心代码(ps a前面没有.)

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

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

完整代码

javascript 复制代码
<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>
相关推荐
CptW6 分钟前
Vue3 的“批量渲染”机制
vue.js·面试
白兰地空瓶11 分钟前
用 Stylus 写 CSS 有多爽?从响应式面板案例看透它的优雅
css·stylus
计算机学姐17 分钟前
基于SpringBoo+Vue的医院预约挂号管理系统【个性化推荐算法+可视化统计】
java·vue.js·spring boot·mysql·intellij-idea·mybatis·推荐算法
佛系菜狗31 分钟前
防抖和节流-防抖鸿蒙版本实现
前端
计算机学姐32 分钟前
基于微信小程序的奶茶店点餐平台【2026最新】
java·vue.js·spring boot·mysql·微信小程序·小程序·mybatis
不一样的少年_1 小时前
老板问我:AI真能一键画广州旅游路线图?我用 MCP 现场开图
前端·人工智能·后端
东方石匠1 小时前
Javascript常见面试题
前端·javascript·面试
恋猫de小郭1 小时前
Flutter 也有类 React Flow 的节点流程编辑器,快来了解下刚刚开源的 vyuh_node_flow
android·前端·flutter
性野喜悲1 小时前
<script setup lang=“ts“>+uniapp实现轮播(swiper)效果
前端·javascript·vue.js·小程序·uni-app
wangdaoyin20101 小时前
UniApp 在手机端(Android)打开选择文件和文件写入
android·前端·uni-app