具體代碼如下所示：

<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當(dāng)導(dǎo)航激活時(shí)允許以index作為路由進(jìn)行頁面的跳轉(zhuǎn),$route.path當(dāng)前路由對(duì)象的路徑，字符串，絕對(duì)路徑 　　　　　　　　　　　　　　　　//unique-opened只允許有一個(gè)下拉菜單處于打開的狀態(tài) 　　　　　　　　　　　　　　　　//使用default-active來實(shí)現(xiàn)當(dāng)前菜單激活的選項(xiàng)　　　　　　　　//default-openeds當(dāng)前打開的 sub-menu 的 index 的數(shù)組<el-menu-item index=‘/home‘>首頁</el-menu-item>      <el-submenu>       <template slot="title">        <i class=‘‘></i><span>導(dǎo)航一</span>       </template>       <el-menu-item index=‘/first/page1‘>        <template slot="title">         <i class=‘‘></i><span>選項(xiàng)一</span>        </template>       </el-menu-item>       <el-menu-item index=‘/first/page2‘>        <template slot="title">         <i class=‘‘></i><span>選項(xiàng)二</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 左側(cè)導(dǎo)航條

<template> <!--實(shí)現(xiàn)左側(cè)導(dǎo)航條動(dòng)態(tài)渲染(三級(jí))--> <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無子級(jí)顯示--> <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無子級(jí)顯示且不支持點(diǎn)擊事件--> <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>