设置router-link样式-使用a-Toy模板网

这篇具有很好参考价值的文章主要介绍了设置router-link样式-使用a。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

设置样式图一变成图二

设置router-link样式-使用a,前端vue3,前端,css,html,vue.js

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

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

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

完整代码文章来源地址https://www.toymoban.com/news/detail-855548.html

<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>

到了这里，关于设置router-link样式-使用a的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！