开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第14天，点击查看活动详情

写在前面

上篇文章介绍了如何在vite+vue项目中编写后台页面的头部代码，本篇文章介绍如何在vite+vue项目中编写后台页面的侧边菜单栏代码

账号：admin
密码：admin

侧边菜单栏代码说明

侧边菜单栏是单页面应用实现路由跳转的关键，接下来我们来实现侧边菜单栏的路由跳转和侧边菜单栏折叠功能

侧边菜单栏的路由跳转

我们使用Element Plus的Menu组件，Menu组件有一个router属性，用来控制是否启用 vue-router 模式。启用该模式会在激活导航时以 index 作为 path 进行路由跳转。我们就利用这个属性来实现路由跳转，Sidebar.vue的代码如下，我们将el-menu的default-active设置为onRoutes，即当前路由的name，这样就能实现active样式：

<template>
  <div class="sidebar" :style="{ width: collapse ? '65px' : '200px' }">
    <el-menu :default-active="onRoutes" router unique-opened class="sidebar_menu" :collapse="collapse">
      <template v-for="item in menus">
        <template v-if="item.children.length > 0">
          <el-sub-menu :index="item.id + ''">
            <template #title>
              <span>{{ item.title }}</span>
            </template>
            <template v-for="subItem in item.children">
              <el-menu-item :index="subItem.name">{{ item.title }}</el-menu-item>
            </template>
          </el-sub-menu>
        </template>
        <template v-else>
          <el-menu-item :index="item.name">
            <template #title>{{ item.title }}</template>
          </el-menu-item>
        </template>
      </template>
    </el-menu>
  </div>
</template>

<script setup lang="ts">
import store from "@/store";
import { computed } from "@vue/runtime-core";

import { useRoute } from "vue-router";

const onRoutes = computed(() => {
  return useRoute().path.replace("/", "")
})

const collapse = computed(() => store.webStore.collapse);

const menus: { name: String, id: Number, title: String, children: any[] }[] = [
  {
    name: 'Menu1', id: 1, title: '菜单1', children: [
      { name: 'Menu1_1', id: 11, title: '菜单1_1' }
    ]
  },
  {
    name: 'Menu2', id: 2, title: '菜单2', children: []
  },
]
</script>

<style lang="less" scoped>
.sidebar {
  position: absolute;
  left: 0;
  top: 52px;
  bottom: 0;
  transition: all 0.3s ease-in-out;
  overflow: hidden;
  border-top-right-radius: 5px;
  background-color: #fff;
}

.sidebar_menu:not(.el-menu--collapse) {
  width: 200px;
}
</style>

然后我们需要在router的routes.ts的主页面下面添加两个菜单：菜单1_1、菜单2，同时在views文件夹下新增Menu1_1.vue文件和Menu2.vue文件，我们只需要定义最后一层的菜单的路由即可。

// 添加到routes.ts中
// 菜单1_1
{
    path: "/Menu1_1",
    name: 'Menu1_1',
    component: () =>
        import("../views/Menu1_1.vue"),
    meta: { title: "菜单1_1" },
},
// 菜单2
{
    path: "/Menu2",
    name: 'Menu2',
    component: () =>
        import("../views/Menu2.vue"),
    meta: { title: "菜单2" },
},

// Menu1_1.vue、Menu2.vue文件内容，以防报错
<template>Menu1_1/Menu2</template>

<script setup lang="ts">
</script>

<style lang="less" scoped>
</style>

侧边菜单栏折叠

在Sidebar.vue中增加代码，增加一个折叠按钮，点击后改变collapse的值，store.webStore.toggleCollapse()这个方法在文章vite+vue项目之引入和使用pinia（类似vuex，但更轻量）中已经定义，所以这里直接用：

    <div class="collapse_icon">
      <el-icon @click="handleCollapse">
        <Menu />
      </el-icon>
    </div>
    <div class="side_nemu">
      ...
    </div>
<script setup lang="ts">
import { Menu, Coin, Help } from '@element-plus/icons-vue'
...
const handleCollapse = () => {
  store.webStore.toggleCollapse()
}
</script>

<style lang="less" scoped>
...
  .collapse_icon {
    height: 40px;
    line-height: 40px;
    color: #606266;
    text-align: center;

    .el-icon {
      font-size: 18px;
      cursor: pointer;
    }
  }

  .side_nemu {
    position: absolute;
    left: 0;
    top: 40px;
    bottom: 0;
    overflow-y: scroll;
    overflow-x: hidden;
  }
</style>

折叠前：

折叠后：

写在最后

以上就是如何在vite+vue项目中编写后台页面的侧边菜单栏的所有代码和说明

vite+vue项目之后台页面的侧边菜单栏代码编写

写在前面

侧边菜单栏代码说明

侧边菜单栏的路由跳转

侧边菜单栏折叠

写在最后