vue-默认打开第一个菜单

使用ruoyi框架，页面菜单在上方（topNav=true），想要刚进入系统时以及刷新页面时，默认展开第一个菜单的菜单树。

在src/components/TopNav/index.vue中

methods方法里添加方法

1     // 展开菜单的方法
2     handleMenuExpand() {
3       // 显示左侧联动菜单
4       console.log(this.topMenus);
5       // this.activeRoutes(this.topMenus[0].path);
6       // this.$store.dispatch('app/toggleSideBarHide', false)
7       this.handleSelect(this.topMenus[0].path, null);
8     },

此处的this.topMenus是computed属性中的

 1 // 顶部显示菜单
 2     topMenus() {
 3       let topMenus = [];
 4       this.routers.map((menu) => {
 5         if (menu.hidden !== true) {
 6           // 兼容顶部栏一级菜单内部跳转
 7           if (menu.path === "/") {
 8               topMenus.push(menu.children[0]);
 9           } else {
10               topMenus.push(menu);
11           }
12         }
13       });
14       return topMenus;
15     },

mounted方法里，执行下展开菜单的方法

  mounted() {
    this.setVisibleNumber();
    this.handleMenuExpand();
  },

实现效果：

 缺陷：

父级菜单没有出现点击选中的效果，这个地方后期还需要优化

posted @ 2025-04-15 10:41  Семён  阅读(150)  评论(1)    收藏  举报