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

此功能包含：

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

2.只展开一个子菜单

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

 

        
          {{ item.title }}
          
            
              {{ subItem.text }}
            
          
        
      

菜单栏路由配置：

{
          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互相交流学习