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