ant design vueナビゲーションメニューとルーティング構成

次の機能があります.
1.動的ルーティングにより自動展開と自動選択に対応するルーティング先ページメニュー
2.サブメニューを1つだけ展開
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('/')) ]
    })
  }

 
わからないことがあったら、メッセージを残したり、お互いに交流したりして勉强しましょう.