element默认选择路由

最新推荐文章于 2024-07-12 16:27:40 发布

Bubluu

最新推荐文章于 2024-07-12 16:27:40 发布

阅读量254

点赞数 4

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_45859470/article/details/139603931

版权

<template>
  <el-menu :default-openeds="defaultOpeneds" :default-active="defaultActive">
    <!-- 菜单项 -->
    <el-submenu v-for="menu in menuList" :index="menu.id" :key="menu.id">
      <template slot="title">{{ menu.name }}</template>
      <el-menu-item v-for="subMenu in menu.children" :index="subMenu.path" :key="subMenu.path">
        {{ subMenu.name }}
      </el-menu-item>
    </el-submenu>
  </el-menu>
</template>
 
<script>
export default {
  data() {
    return {
      menuList: [
        // 菜单数据，包含id，name和children
      ],
      defaultOpeneds: [], // 默认展开的菜单id数组
      defaultActive: null, // 当前激活的菜单路径
    };
  },
  watch: {
    // 监听路由变化，更新菜单状态
    $route: {
      immediate: true,
      handler(route) {
        this.updateMenuState(route);
      },
    },
  },
  methods: {
    updateMenuState(route) {
      const menu = this.menuList.find(m => m.children.some(sm => sm.path === route.path));
      if (menu) {
        this.defaultOpeneds = [menu.id]; // 设置默认展开的菜单
        this.defaultActive = route.path; // 设置当前激活的菜单
      }
    },
  },
};
</script>