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

 <template>
   <el-menu :default-active="activedMenu($route.path)" class="el-menu-vertical-demo padding-top-10" @open="handleopen" @close="handleclose" @select="handleselect"
            unique-opened router>
     <template v-for="(item,index) in navData" :index="index+''" v-if="item.role">
       <el-submenu :index="index+''" v-if="item.panels.length > 0">
         <template slot="title"><i :class="item.icon"><span class="path1"></span><span class="path2"></span><span class="path3"></span></i>{{item.name}}</template>
         <el-menu-item-group v-for="panels in item.panels" :index="panels.name" :key="panels.name" v-if="panels.role">
           <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>
           <el-submenu v-else :index="panels.name">
             <template slot="title"><i :class="panels.icon"><span class="path1"></span><span class="path2"></span><span class="path3"></span></i>{{panels.name}}</template>
             <el-menu-item v-for="menu in panels.menu" :index="menu.url" :key="menu.url" v-if="menu.limit">
               <i class="nav-radius"></i>{{ menu.name }}
             </el-menu-item>
           </el-submenu>
         </el-menu-item-group>
       </el-submenu>
       <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>
     </template>
   </el-menu>

 </template>

el-submenu或者el-menu-item的index设置成路由对应的字符串，也是根据路由选择左侧导航栏，但是路由可能有不固定的参数，那就根据固定的参数来判断选择哪一项：

 activedMenu: function (val) {
   if (val.indexOf('/project') == 0) {
     return '/project/'
   } else if (val.indexOf('/alarm') == 0) {
     return '/alarm/'
   } else if (val.indexOf('/backup') == 0) {
     return '/backup/'
   } else if (val.indexOf('/sites_monitor') == 0) {
     return '/sites_monitor/'
   } else if (val.indexOf('/security_group') == 0) {
     return '/security_group/'
   } else if (val.indexOf('/lbaas') == 0) {
     return '/lbaas/'
   } else if (val.indexOf('/rule') == 0) {
     if (val.indexOf('/user') > -1) {
       return '/user/'
     } else {
       return '/user_group/'
     }
   } else if (val.indexOf('/create_page') == 0) {
     if (val.indexOf('/instance') > -1) {
       return '/instances/'
     } else if (val.indexOf('/images') > -1){
       return '/image/'
     } else if (val.indexOf('/snapshot') > -1){
       return '/snapshot/'
     } else if (val.indexOf('/profile') > -1){
       return '/ess_profile/'
     }
   } else if (val.indexOf('/monitor_detail') == 0) {
     if (val.indexOf('/instances') > -1) {
       return '/instances/'
     } else {
       return '/hypervisors/'
     }
   } else {
     return val
   }
 },