使用element-ui的el-menu导航选中后刷新页面保持当前选中状态_el-menu刷新保持选中状态

5星 · 超过95%的资源 48 浏览量更新于2023-03-03 评论收藏 42KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

使用使用element-ui的的el-menu导航选中后刷新页面保持当前选中导航选中后刷新页面保持当前选中

状态状态

具体代码如下所示：

<el-menu :default-active=‘$route.path‘ :router=‘true‘ :unique-opened=‘true‘ :default-openeds="defaultOpeneds"

　　　　　　　　background-color="#bd1e22" text-color="#fff" active-text-color="#ffd04b"> 　　　　　　　　

　　　　　　　　//router当导航激活时允许以index作为路由进行页面的跳转,$route.path当前路由对象的路径，字符串，绝对路径　　　　　　　　

　　　　　　　　//unique-opened只允许有一个下拉菜单处于打开的状态　　　　　　　　

　　　　　　　　//使用default-active来实现当前菜单激活的选项

　　　　　　　　//default-openeds当前打开的 sub-menu 的 index 的数组

<el-menu-item index=‘/home‘>首页</el-menu-item>

<el-submenu>

</template>

<el-menu-item index=‘/first/page1‘>

</template>

</el-menu-item>

<el-menu-item index=‘/first/page2‘>

</template>

</el-menu-item>

</el-submenu>

</el-menu

mounted(){

let path = this.$route.path;

this.navConfig = [

{index:'1',path:['/system/aa','/system/bb','/system/cc']},

];

let thisNav = this.navConfig.find(item =>{

return item.path.includes(path);

});

this.defaultOpeneds = [thisNav.index];

}

ps：下面看下：下面看下vue Element-ui el-menu 左侧导航条左侧导航条

<el-menu class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse" router unique-opened

background-color="#545c64"

text-color="#fff"

active-text-color="#ffd04b">

<el-menu-item index="/home/main">

</el-menu-item>

<el-submenu v-for="(item,index) in content" :key="item.id" :data="item" v-if="item.children.length>0&&item.level==1" :index="item.linkname">

<span slot="title">{{item.linkname}}</span>

</template>

<el-submenu v-for="(child,seq) in item.children" :data="child" v-if="item.id==child.parentid&&child.children.length>0&&child.level==2" :key="child.id"

:index="child.linkname">

<span slot="title">{{child.linkname}}</span>

<el-menu-item v-for="three in child.children" :data="three" v-if="child.id==three.parentid&&child.children.length!=0&&three.level==3" :key="three.id"

:index="three.link">

<span slot="title">{{three.linkname}}</span>

</el-menu-item>

</el-submenu>

<el-menu-item v-for="(child,seq) in item.children" :data="child" v-if="item.id==child.parentid&&child.children.length==0&&child.level==2" :key="child.id"

:index="child.link">

<span slot="title">{{child.linkname}}</span>

</el-menu-item>

</el-submenu>

<el-menu-item v-for="(item,index) in content" :key="item.id" :data="item" v-if="item.children.length==0&&item.level==1" :index="item.linkname"

:disabled="item.children.length==0 ? true : false ">

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载