Element el-menu(NavMenu)的正确用法

最近在使用Element开发时 一开始按照官网示例 产品前期没什么问题 到了后期 遇到这样一个情况：并不是只有点击导航栏才跳转页面

需求：

如果根据官网的示例，每个el-menu-item的index都为’1-1’ '1-2’之类的。如果直接跳转路由，你会发现导航栏当前激活菜单的 index没有改变。点击跳转。但菜单栏依旧停留在分组这个栏目

只有两种方法可以解决这个问题：

1. 通过子组件的this.$emit方法触发父组件绑定的事件，改变default-active属性值
2. 通过vuex储存el-menu的default-active属性值，在子组件的点击事件改变这个属性值

但是我试了第一种方法，没有生效。可能需要watch这个变量才能响应。这两种方法可能比较麻烦，后来发现一个很有效的方法。废话不多说。代码如下

正确用法：

<el-menu
        :default-active="$route.path"
        class="el-menu-vertical-demo"
        :collapse="isCollapse"
        router
        overflow-y:
        scroll
      >
        <el-submenu index="1">
          <template slot="title">
            <i class="el-icon-menu"></i>
            <span slot="title">账号管理</span>
          </template>
          <el-menu-item index="/demo/index">列表</el-menu-item>
          <el-menu-item index="/demo/group/index">分组</el-menu-item>
        </el-submenu>
</el-menu>

总结：

将default-active设置为$route.path，el-menu-item的index设为要跳转的路由（并且点击菜单项，会直接push到点击的页面)。注意：一定要设置el-submenu的index属性（1，2，3…）。不然会出bug

这样就无需关心default-active的属性值了。只要路由改变了，对应的菜单项也会激活