A versão mais recente do vue-element-admin 4.4 percebe que quando várias rotas de URL correspondem a um caminho, o menu esquerdo permanece em destaque.

ambiente:

vue-admin-template-4.4versão ( vue2)

precisar:

Também quero que o menu de pagamento permaneça em destaque quando eu visitar para solicitar uma conta.

Análise de causa:

Como o menu aqui utiliza roteamento de correspondência exata, urlo menu será destacado somente quando o roteamento correspondente for acessado.

Como resolver:

1. Primeiro encontre src\router\index.jse adicione as seguintes informações ao caminho do menu onde você precisa salvar o destaque, como o openAccount acima:

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

2. Encontre src\layout\components\Sidebar\index.vuea linha 40, que está aqui:

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

Adicione uma nova ifdeclaração:

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

Economize para atender às suas necessidades. O efeito é mostrado na figura:

Se você tiver dificuldades no desenvolvimento de front-end web, entrevistas ou rotas de aprendizagem front-end, você pode me adicionar V: imqdcnn. Perguntas e respostas gratuitas, especialistas técnicos que estão no setor há muitos anos irão ajudá-lo a resolver bugs.

Desejo que você se torne um excelente engenheiro de desenvolvimento front-end WEB!