vue-element-admin 4.4의 최신 버전은 여러 URL 경로가 경로와 일치할 때 왼쪽 메뉴가 강조 표시된 상태로 유지된다는 것을 인식합니다.

환경:

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

귀하의 요구를 충족시키기 위해 저장하십시오. 효과는 그림과 같습니다.

웹 프론트엔드 개발이나 인터뷰, 프론트엔드 학습 경로에 어려움이 있다면 저에게 V:imqdcnn을 추가해 주시면 됩니다. 무료 Q&A, 다년간 업계에 종사해 온 기술 전문가들이 버그 해결을 도와드립니다.

당신이 훌륭한 WEB 프론트엔드 개발 엔지니어가 되기를 바랍니다!