element plus中menu菜单技巧

我在使用element plus的menu（侧边栏）组件的过程中遇到了一些问题，就是menu编写样式和路由跳转，下面给大家分享以下，我是怎么解决的。

1.页面效果

我要实现的网站布局是这样的：

 侧边栏折叠以后的效果：

网站的布局我是用element plus官网提供的布局方式：

 2.样式

下面是对应的style设置：

这里我用了tailwind css。

3.路由

4.路由对应的页面

1.HomeView.vue

2.AboutView.vu

3.LayoutView.vue

<script setup>
import { Expand, Fold, HomeFilled, InfoFilled } from "@element-plus/icons-vue";
import {ref} from "vue";

const isSidebarOpen = ref(false)

</script>

<template>
  <div class="common-layout">
    <el-container>
      <el-aside :class="{'is-sidebar-open':isSidebarOpen}" width="200px" class="bg-gray-800 h-screen">
        <!--最上面logo-->
        <div class="-ml-2 h-16 flex items-center justify-center">
          <img class="object-cover h-14 w-14" src="@/assets/images/A%20拷贝.png" alt="logo">
          <h1 v-show="!isSidebarOpen" class="-ml-2 text-2xl text-white font-bold">Blog</h1>
        </div>
        <el-menu
            :collapse="isSidebarOpen"
            :collapse-transition="false"
            router
            :default-active="$route.path"
            background-color="#1f2937"
            text-color="#fff"
            style="border: none"
        >
          <el-menu-item index="/home" route="/home">
            <el-icon><HomeFilled /></el-icon>
            <span class="font-semibold">Home</span>
          </el-menu-item>
          <el-menu-item index="/about" route="/about">
            <el-icon><InfoFilled /></el-icon>
            <span class="font-semibold">About</span>
          </el-menu-item>
        </el-menu>
      </el-aside>

      <el-container>
        <el-header class="h-16 shadow-md z-10 flex items-center justify-between">
          <div>
            <button @click="isSidebarOpen = !isSidebarOpen">
              <el-icon>
                <component :is="isSidebarOpen ? Expand : Fold"></component>
              </el-icon>
            </button>
          </div>
          <div class="flex items-center space-x-4">
            <h1 class="font-medium">AkbarSmile</h1>
            <img class="w-10 h-10 rounded-full" src="@/assets/images/Mofei1-cut.jpg" alt="avatar">
          </div>
        </el-header>
        <el-main class="bg-slate-100">
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style scoped>
aside {
  @apply transition-all duration-300;
}
.is-sidebar-open {
  @apply w-16;
}

.el-menu {
  @apply w-full
}
.el-menu--collapse .el-menu-item {
  @apply p-0 m-0 flex items-center justify-center;
}
.el-menu-item.is-active {
  @apply bg-purple-600 text-white w-full ;
}
</style>

可能很多同学没有使用过tailwind css，但是用普通的css代码，也可以实现同样的效果。

大家自己打开多研究研究，其实能找到找技巧的话，element plus非常好用。