1 <template> 2 <el-menu :default-active="activedMenu($route.path)" class="el-menu-vertical-demo padding-top-10" @open="handleopen" @close="handleclose" @select="handleselect" 3 unique-opened router> 4 <template v-for="(item,index) in navData" :index="index+''" v-if="item.role"> 5 <el-submenu :index="index+''" v-if="item.panels.length > 0"> 6 <template slot="title"><i :class="item.icon"><span class="path1"></span><span class="path2"></span><span class="path3"></span></i>{{item.name}}</template> 7 <el-menu-item-group v-for="panels in item.panels" :index="panels.name" :key="panels.name" v-if="panels.role"> 8 <el-menu-item v-if="panels.menu.length == 0" :index="panels.url" ><i :class="panels.icon"><span class="path1"></span><span class="path2"></span><span class="path3"></span></i>{{panels.name}}</el-menu-item> 9 <el-submenu v-else :index="panels.name"> 10 <template slot="title"><i :class="panels.icon"><span class="path1"></span><span class="path2"></span><span class="path3"></span></i>{{panels.name}}</template> 11 <el-menu-item v-for="menu in panels.menu" :index="menu.url" :key="menu.url" v-if="menu.limit"> 12 <i class="nav-radius"></i>{{ menu.name }} 13 </el-menu-item> 14 </el-submenu> 15 </el-menu-item-group> 16 </el-submenu> 17 <el-menu-item v-else :index="item.url"><i :class="item.icon"><span class="path1"></span><span class="path2"></span><span class="path3"></span></i>{{item.name}}</el-menu-item> 18 </template> 19 </el-menu> 20 21 </template>
el-submenu或者el-menu-item的index设置成路由对应的字符串，也是根据路由选择左侧导航栏，但是路由可能有不固定的参数，那就根据固定的参数来判断选择哪一项：
1 activedMenu: function (val) { 2 if (val.indexOf('/project') == 0) { 3 return '/project/' 4 } else if (val.indexOf('/alarm') == 0) { 5 return '/alarm/' 6 } else if (val.indexOf('/backup') == 0) { 7 return '/backup/' 8 } else if (val.indexOf('/sites_monitor') == 0) { 9 return '/sites_monitor/' 10 } else if (val.indexOf('/security_group') == 0) { 11 return '/security_group/' 12 } else if (val.indexOf('/lbaas') == 0) { 13 return '/lbaas/' 14 } else if (val.indexOf('/rule') == 0) { 15 if (val.indexOf('/user') > -1) { 16 return '/user/' 17 } else { 18 return '/user_group/' 19 } 20 } else if (val.indexOf('/create_page') == 0) { 21 if (val.indexOf('/instance') > -1) { 22 return '/instances/' 23 } else if (val.indexOf('/images') > -1){ 24 return '/image/' 25 } else if (val.indexOf('/snapshot') > -1){ 26 return '/snapshot/' 27 } else if (val.indexOf('/profile') > -1){ 28 return '/ess_profile/' 29 } 30 } else if (val.indexOf('/monitor_detail') == 0) { 31 if (val.indexOf('/instances') > -1) { 32 return '/instances/' 33 } else { 34 return '/hypervisors/' 35 } 36 } else { 37 return val 38 } 39 },