近期项目用vue+element ui 做了一个新的后台管理系统 用到了菜单模块, 功能需要他刷新返回自动展开原本的导航列表,经过网上搜索发现 现有网上的博客都不能实现(可能是我自己的原因),经过摸索发现,默认展开导航需要两个关键属性default-openeds和default-active,官网上解释的 当前激活菜单的 index 和 当前打开的 sub-menu 的 index 的数组,多的不哔哔了 上代码看就懂了

在这里插入图片描述

:default-openeds="defalut"中的defalut指的是['1-4']这种
<el-menu
     :default-active="$route.path"
     :default-openeds="defalut"
     class="el-menu-vertical-demo"
     @open="handleOpen"
     @close="handleClose"
     @select="selected"
     background-color="#34495F"
     active-background="#fff"
     active-text-color="#000"
>
</el-menu>
<script>
   let store = storage.getItem('active')
    if(store){
        this.activeDefault = store[0]
        this.defalut.push(store[1])
        console.log(this.defalut)
    }
    window.addEventListener('beforeunload',()=>{
        storage.setItem('active',this.activeDefault)
        console.log(this.defalut)
    })
   handleOpen(key, keyPath) {
      this.activeDefault = keyPath;
      console.log(key, keyPath);
    },
</script>

刚发现只需要**:default-active="$route.path"** 这个属性就能实现了

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐