最新バージョンの 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;
}

ニーズを達成するために保存してください。効果は次の図に示すとおりです。

Web フロントエンド開発、面接、またはフロントエンドの学習ルートで問題がある場合は、V: imqdcnn を追加してください。無料の Q&A で、長年業界に携わってきた技術専門家がバグの解決をお手伝いします。

優秀なWEBフロントエンド開発エンジニアになってください！