element UI 导航栏根据路径来确定默认选中

 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 },