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

BUG:浏览器回退高亮部分错误显示

如果根据官网的示例，每个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的属性值了。只要路由改变了，对应的菜单项也会激活

原文链接：https://blog.csdn.net/weixin_42565137/article/details/91909055