el-menu页面跳转保留上一级路由样式

功能1：点击el-menu-item实现页面跳转

el-menu中使用 vue-router进行页面跳转时，可以直接通过设置:default-active="$route.path"（注意default-active是el-menu自带的属性绑定，要添加前面的冒号）以及设置el-menu-item中的index = "跳转路径"即可点击el-menu-item实现页面跳转

<el-menu router :default-active="$route.path" class="el-menu-demo" mode="horizontal">
  <el-menu-item index="/pageOne">页面1</el-menu-item>
  <el-menu-item index="/pageTwo">页面2</el-menu-item>
</el-menu>

功能2：点击el-menu-item页面内按钮进行路径下子页面的跳转，同时导航栏上的样式仍保持在该el-menu-item上

功能需求：假设点击‘页面1’跳转至路径为’ /standard ‘的页面，同时class=“ is-active ”被触发，当点击页面1中的查看按钮时候，我希望路由跳转至路径为’ /standard/detail '的页面，同时保持class=“ is-active ”仍然被触发

//其它没有被跳转的路由，class="el-menu-item" 
<li data-v-b1c168d4="" role="menuitem" tabindex="0" class="el-menu-item" style="border-bottom-color: transparent;">页面1</li>
//路由跳转至页面2时， class="el-menu-item is-active" 
<li data-v-b1c168d4="" role="menuitem" tabindex="0" class="el-menu-item is-active" style="">页面2</li>

上述功能实现代码👇

HTML部分：将:default-active="$route.path"改为:default-active=“onRoutes”

<el-menu router :default-active="onRoutes" class="el-menu-demo" mode="horizontal"  >
  <el-menu-item index="/pageOne">页面1</el-menu-item>
   <el-menu-item index="/pageTwo">页面2</el-menu-item>
 </el-menu>

JS部分：在计算属性computed中判断路由路径是否是‘ /standard ’的子页面’ /standard/detail ‘，true则返回/standard，false则返回该路由

computed:{
    onRoutes(){
      //判断是否在子页面中
        if(this.$route.path == '/standard/detail'){
          return '/standard'
        }
        else{
          return this.$route.path
        }
      }
    }

对于不太理解vue中router路由跳转和对el-menu使用不太熟练的小伙伴，推荐一个b站的教程视频Spring Boot+Vue前后端分离开发，其中第2集和第3集详细讲了有关的知识，本文该功能需求是在该视频教程下进行的改动。