Ant Design Vue 實現菜單欄根據url變化自動高亮和展開

轉載於：

https://blog.csdn.net/qq_35069272/article/details/104990576

以下是我根據自己的情況作了適當的修改：

實現的功能：

• 刷新后保持菜單選中
• 當從一個頁面 push到另一個頁面時，頁面跳轉，對應的菜單高亮
• 瀏覽器輸入url后，頁面跳轉，對應的菜單高亮

<template>
  <a-layout id="layout" style="min-height: 100vh">
    <a-layout-sider v-model="collapsed" collapsible>    
      <a-menu 
          theme="dark" 
          :openKeys="openKeys"   // 重點: 當前展開的菜單
          @openChange="onOpenChange"    // 重點: 當可以展開的菜單被點擊時
          v-model="SelectedKeys"     // 選中的菜單
          mode="inline">
        <template v-for="item in menuItems">
          <!--  有二級菜單的一級菜單  -->
          <a-sub-menu v-if="item.children && item.is_active" :key="item.id">
            <span slot="title">
              <a-icon :type="item.icon" /><span>{{ item.name }}</span>
            </span>
            <!-- 二級菜單 -->
            <template v-for="subItem in item.children">
              <a-menu-item v-if="subItem.is_active" :key="subItem.path" :index="subItem.path">
                <router-link :to="{ path: subItem.path }">
                  <a-icon v-if="subItem.icon" :type="subItem.icon" />
                  <span>{{ subItem.name }}</span>
                </router-link>
              </a-menu-item>
            </template>
          </a-sub-menu>
          <!--沒有二級菜單的一級菜單-->
          <a-sub-menu v-if="!item.children && item.is_active" :key="item.id + ''">
            <span slot="title">
              <a-icon :type="item.icon" /><span>{{ item.name }}</span>
            </span>
          </a-sub-menu>
        </template>
      </a-menu>
    </a-layout-sider>
    <a-layout>
    </a-layout>
  </a-layout>
</template>

<script>
import { MenuTree } from '@/api/rbac'

export default {
  data () {
    return {
      SelectedKeys: [this.$route.path],
      openKeys: [],
      menuItems: [],
      submenu: [],
    }
  },
//  通過結果從后端獲取菜單
// 成功后的格式為  
//     [
//     {
//         "id": 2,
//         "name": "系統管理",
//         "icon": "setting",
//         "path": "",
//         "is_active": true,
//         "sort": 2,
//         "pid": null,
//         "children": [
//             {
//                 "id": 3,
//                 "name": "用戶管理",
//                 "icon": "user",
//                 "path": "/user/manage",
//                 "is_active": true,
//                 "sort": 1,
//                 "pid": 2
//             },
//         ]
//     }
// ]
  async created () {
    await MenuTree().then(res => {
      this.menuItems = res
      for (const item of res) {
        if (item.children) {
          for (const subitem of item.children) {
            if (subitem.path === this.$route.path) {
              this.openKeys = [subitem.pid]     // 此時this.openKeys為父菜單的id（因為父菜單key為:key="item.id"）,此時當在瀏覽器輸入url時，會展開此子菜單的父菜單
            }
          }
        }
      }
    })
  },
  watch: {
    '$route.path': function () {
      this.SelectedKeys = [this.$route.path]     // 此處監聽路由變化，是當push跳轉時，是跳轉后url的菜單高亮
    }
  },
  methods: {
    onOpenChange (openKeys) {
    // 當菜單被展開時觸發此處
      /* 
      經測試傳入的變量openKeys是數組 點擊已經展開的菜單時傳入的是空數組
      點擊未展開的菜單時傳入的是【當前展開菜單的key,點擊的菜單key】
      下面的if判斷用openKeys === [] 無效 所以我只能判斷數組length是否等於0
      */
      if (openKeys.length !== 0) {
        this.openKeys = [openKeys[1]]
      } else {
        this.openKeys = ['']
      }
    }
  },
}
</script>

<style>

</style>