init

src/page/index/sidebar/index.vue

@@ -0,0 +1,63 @@
+<template>
+  <el-scrollbar class="avue-menu">
+    <div v-if="menu && menu.length == 0 && !isHorizontal" class="avue-sidebar--tip">
+      {{ $t('menuTip') }}
+    </div>
+    <el-menu
+      unique-opened
+      :default-active="activeMenu"
+      :mode="setting.sidebar"
+      :collapse="getScreen(isCollapse)"
+    >
+      <sidebar-item :menu="menu"></sidebar-item>
+    </el-menu>
+  </el-scrollbar>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import website from '@/config/website';
+import sidebarItem from './sidebarItem.vue';
+
+export default {
+  name: 'sidebar',
+  components: { sidebarItem },
+  inject: ['index'],
+  created() {
+    this.index.openMenu();
+  },
+  computed: {
+    ...mapGetters(['isHorizontal', 'setting', 'menu', 'tag', 'isCollapse', 'menuId']),
+    // 带参菜单的索引集合，用于激活态的精确匹配
+    menuIndexes() {
+      const props = website.menu;
+      const indexes = new Set();
+      const collect = list => {
+        (list || []).forEach(item => {
+          const query = item[props.query];
+          if (query && Object.keys(query).length) {
+            indexes.add(this.$router.resolve({ path: item[props.path], query }).fullPath);
+          }
+          collect(item[props.children]);
+        });
+      };
+      collect(this.menu);
+      return indexes;
+    },
+    activeMenu() {
+      const route = this.$route;
+      const { meta, path } = route;
+      if (meta.activeMenu) {
+        return meta.activeMenu;
+      }
+      // 完整地址命中带参菜单索引时精确高亮，其余场景按路径高亮
+      const fullPath = route.fullPath;
+      if (fullPath !== path && this.menuIndexes.has(fullPath)) {
+        return fullPath;
+      }
+      return path;
+    },
+  },
+};
+</script>
+<style lang="scss" scoped></style>