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

这篇文章给大家分享的是有关如何使用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 slot="title">         <i class=‘‘></i><span>导航一</span>        </template>        <el-menu-item index=‘/first/page1‘>         <template slot="title">          <i class=‘‘></i><span>选项一</span>         </template>        </el-menu-item>        <el-menu-item index=‘/first/page2‘>         <template slot="title">          <i class=‘‘></i><span>选项二</span>         </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 左侧导航条

<template>  <!--实现左侧导航条动态渲染(三级)-->  <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">  <i class="el-icon-document"></i>  <span slot="title">首页</span>  </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">  <template slot="title">  <i class="el-icon-location"></i>  <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>  <!--2无子级显示-->  <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>  <!--1无子级显示且不支持点击事件-->  <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 ">  <i class="el-icon-setting"></i>  <span slot="title">{{item.linkname}}</span>  </el-menu-item>  </el-menu>  </div> </template> <script> import axios from "axios"; import $ from 'jquery'; export default {  data() {  return {  content: [],  isCollapse: false,  defaultProps: {  children: 'children',  label: 'linkname'  }  };  },  mounted(){  var _self = this;  axios.get('https://5b90a18b3ef10a001445d08e.mockapi.io/api/v1/resources')  .then(function (response) {  _self.content = returnZhData(response.data);  })  .catch(function (error) {  console.log(error);  });  },  methods: {  handleOpen(key, keyPath) {  console.log(key, keyPath);  },  handleClose(key, keyPath) {  console.log(key, keyPath);  },  handleNodeClick(content) {  console.log(content);  }  } } function returnZhData(data){  var arrone=[];  $.each(data, function(index,one) {  if(one['level'] == 1){  arrone.push(one);  var arrtwo=[];  $.each(data, function(index,two) {  if(two['level'] == 2 && two['parentid']==one['id']){  arrtwo.push(two);  var arrthree=[];  $.each(data, function(index,three) {  if(three['level'] == 3 && three['parentid']==two['id']){  arrthree.push(three);  }  });  two.children=arrthree;  }  });  one.children = arrtwo;  }  });  return arrone; } </script> <style> .el-menu-vertical-demo:not(.el-menu--collapse) {  width: auto;  min-height: 400px; } </style>

感谢各位的阅读！关于“如何使用element-ui的el-menu导航选中后刷新页面保持当前选中状态”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！