vue3项目实战---左侧导航菜单栏

<template>
  <div class="sidebar">
    <div class="sidebar-logo" :class="{'collapse': isCollapse}">
      <!-- 这里可以放置logo图片或文字 -->
      {{ title }}
    </div>
    <el-menu
      :default-active="onActivePath"
      class="sidebar-menu"
      text-color="#fff"
      active-text-color="#ffd04b"
      :collapse="isCollapse"
      :collapse-transition="false"
    >
      <!-- 使用v-for指令循环渲染菜单项 -->
      <sidebar-item v-for="route in routes" :key="route.path" :item="route" />
    </el-menu>
  </div>
</template>
 
<script setup>
import { ref, watch } from 'vue';
import { useRoute } from 'vue-router';
import SidebarItem from './SidebarItem.vue';
 
// 定义路由数据
const routes = [
  {
    path: '/dashboard',
    meta: { title: 'Dashboard', icon: 'dashboard' },
  },
  // ...其他路由数据
];
 
// 当前激活的路径
const onActivePath = ref('');
// 是否折叠菜单
const isCollapse = ref(false);
// 标题
const title = ref('Your Title');
 
// 监听路由变化，更新当前激活的路径
watch(() => useRoute().path, (newPath) => {
  onActivePath.value = newPath;
});
</script>
 
<style scoped>
.sidebar {
  /* 样式 */
}
.sidebar-logo {
  /* 样式 */
}
.collapse {
  /* 样式 */
}
.sidebar-menu {
  /* 样式 */
}
</style>

这个代码实例展示了如何在Vue 3项目中创建一个左侧的导航菜单栏，并使用<script setup>语法糖简化了代码编写。同时，它使用了el-menu和el-sub-menu组件来构建可折叠的菜单项，并通过v-for指令动态渲染路由数据。此外，它使用了Composition API 中的ref和watch来管理菜单的状态和响应路由的变化。