ant design vue导航菜单与路由配置

此功能包含：

1.根据动态路由自动展开与自动选择对应路由所在页面菜单

2.只展开一个子菜单

3.兄弟组件控制菜单与路由

 

<a-menu
        :openKeys="openKeys"
        :selectedKeys="selectedKeys"
        mode="inline"
        theme="dark"
        :inlineCollapsed="$store.state.isCollapse"
        @click='select'
        @openChange='openChange'
      >
        <a-sub-menu v-for="item in menu" :key="item.name" :index="item.title">
          <span slot="title"
            ><a-icon :type="item.icon" /><span>{{ item.title }}</span></span
          >
          <a-menu-item
            v-for="subItem in item.submenu"
            :key="subItem.index"
            :index="subItem.index"
          >
            <router-link :to="subItem.path">
              {{ subItem.text }}
            </router-link>
          </a-menu-item>
        </a-sub-menu>
      </a-menu>

菜单栏路由配置：

{
          title: 'Dashboard',
          name: '/dashboard',
          icon: 'dashboard',
          submenu: [
            { text: '分析页', path: '/dashboard/analysis', index: '/analysis' },
            { text: '监控页', path: '/dashboard/monitor', index: '/monitor' }
          ]
        }

默认开启的子菜单及选中项配置

openKeys: [this.$route.path.substr(0, this.$route.path.lastIndexOf('/'))],
selectedKeys: [this.$route.path.substr(this.$route.path.lastIndexOf('/'))],
rootSubmenuKeys: ['/dashboard', '/form', '/table', '/user'], // 有几个子菜单项就贴几个

 

功能代码：

methods: {
    openChange (openKeys) { // 只展开一个子菜单
      const latestOpenKey = openKeys.find(key => this.openKeys.indexOf(key) === -1)
      if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
        this.openKeys = openKeys
      } else {
        this.openKeys = latestOpenKey ? [latestOpenKey] : []
      }
    },
    select ({ item, key, selectedKeys }) { // 选中项
      this.selectedKeys = [key]
    }
  },
  created () {
    this.$bus.$on('goperson', (url) => { // 组件间通信设置菜单栏状态  此处功能可查看另一篇博客
      this.openKeys = [ url.substr(0, url.lastIndexOf('/')) ]
      this.selectedKeys = [ url.substr(url.lastIndexOf('/')) ]
    })
  }

 

如有不清楚的可以留言或者加qq互相交流学习