设置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>
相关推荐
moxiaoran57533 小时前
uni-app萌宠案例学习笔记--页面布局和CSS样式设置
前端·css·uni-app
CrissChan3 小时前
Pycharm 函数注释
java·前端·pycharm
小小小小宇4 小时前
Vue.nextTick()笔记
前端
小约翰仓鼠5 小时前
vue3子组件获取并修改父组件的值
前端·javascript·vue.js
Lin Hsüeh-ch'in6 小时前
Vue 学习路线图(从零到实战)
前端·vue.js·学习
烛阴6 小时前
bignumber.js深度解析:驾驭任意精度计算的终极武器
前端·javascript·后端
计蒙不吃鱼6 小时前
一篇文章实现Android图片拼接并保存至相册
android·java·前端
全职计算机毕业设计6 小时前
基于Java Web的校园失物招领平台设计与实现
java·开发语言·前端
啊~哈7 小时前
vue3+elementplus表格表头加图标及文字提示
前端·javascript·vue.js