使用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导航选中后刷新页面保持当前选中,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！