el-menu页面内控制激活的菜单$router.path :default-active

需求是在页面内点击跳转，但是菜单项依然是激活状态，我这里实现的方法是做了子路由，然后使用push来控制路由跳转，跳转时使用$router.path来实现更改默认路由，注意子路由需要使用split来分割出第一个/后的一级路由，使用这个取出来的来赋给：default-active,这里因为是通过请求从后台获取的菜单路由，赋给index来实现动态加载不同的菜单项，所以会有el-menu的index可能为空的问题，也即是加载顺序的问题，这里使用了计算属性来动态的监控，双向绑定，也就勉强的解决了这个问题，这样会存在首次加载效果不出来的问题。但是相比等待后台请求后在加载页面，（注意请求时间，）用户的体验会好一些。
公司是不连接外网的，就不扣代码了。下面的两个博客足够借鉴了，主要是思路的问题。

el-menu页面内控制激活的index
https://blog.csdn.net/fifteen718/article/details/82792099

<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