The latest version of vue-element-admin 4.4 realizes that when multiple url routes are matched to a path, the left menu remains highlighted.

environment:

vue-admin-template-4.4version ( vue2)

need:

I also want the payment menu to remain highlighted when I visit to apply for an account.

Cause Analysis:

Because the menu here uses exact matching routing, urlthe menu will be highlighted only when the corresponding routing is accessed.

How to solve:

1. First find src\router\index.jsand add the following information to the menu route where you need to save the highlight, such as the openAccount above:

{
    
    
    path: "/openAccount",
    component: Layout,
    children: [
      {
    
    
        path: "",
        name: "openAccount",
        hidden: true,
        component: () => import("@/views/pay/openAccount"),
        meta: {
    
    
          title: "申请开户",
          icon: "password",
          keepMenuActive: true,  //新增
          targetPath: "/pay", //新增
        },
      },
    ],

2. Find src\layout\components\Sidebar\index.vueline 40, which is here:

<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>        

Add a new ifstatement:

if (meta.keepMenuActive) {
    
    
    return meta.targetPath;
}

Save to achieve your needs. The effect is as shown in the figure:

If you have difficulties in web front-end development, interviews, or front-end learning routes, you can add me V: imqdcnn. Free Q&A, technical experts who have been in the industry for many years will help you solve bugs.

I wish you can become an excellent WEB front-end development engineer!