环境：
vue-admin-template-4.4版本（vue2）
需求：
当我访问申请开户时，也希望支付菜单能保持高亮状态。
原因分析：
因为菜单这里用的是精确匹配路由，只有访问到url对应的路由，该菜单才会高亮。
如何解决：
1、首先找到 src\router\index.js，在需要保存高亮的菜单路由这，比如上面的openAccount中添加如下信息：
{ path: "/openAccount", component: Layout, children: [ { path: "", name: "openAccount", hidden: true, component: () => import("@/views/pay/openAccount"), meta: { title: "申请开户", icon: "password", keepMenuActive: true, //新增 targetPath: "/pay", //新增 }, }, ],
2、再找到 src\layout\components\Sidebar\index.vue 第40行，即这里：
<el-scrollbar wrap-class="scrollbar-wrapper"> <el-menu :default-active="activeMenu" :collapse="isCollapse" :background-color="variables.menuBg" :text-color="variables.menuText" :unique-opened="false" :active-text-color="variables.menuActiveText" :collapse-transition="false" mode="vertical" > <sidebar-item v-for="route in permission_routes" :key="route.path" :item="route" :base-path="route.path" /> </el-menu> </el-scrollbar> <script> export default { components: { SidebarItem, Logo }, computed: { activeMenu() { const route = this.$route; const { meta, path } = route; // if set path, the sidebar will highlight the path you set if (meta.activeMenu) { return meta.activeMenu; } // 多个 path，匹配到某个path，并且高亮到该path菜单-----新增如下if语句 if (meta.keepMenuActive) { return meta.targetPath; } return path; }, } </script>
新增一条if语句：
if (meta.keepMenuActive) { return meta.targetPath; }
保存即可实现需求。效果如图：
如果你在web前端开发、面试、前端学习路线有困难可以加我V。免费答疑，行业深潜多年的技术牛人帮你解决bug。
祝你能成为一名优秀的WEB前端开发工程师！
