Vue Element フロントエンドアプリケーション開発の動的メニューとルーティングの関連付け処理

[
  {
    id: '1',
    pid: '-1',
    テキスト: 'ホームページ'、
    アイコン: 'ダッシュボード'、
    名前: 'ダッシュボード'
  },
  {
    id: '2',
    pid: '-1',
    テキスト: '製品リスト'、
    アイコン: 'テーブル',
    名前: '製品'
  },
  {
    id: '3',
    pid: '-1',
    テキスト: '第 1 レベル メニュー'、
    アイコン: '例',
    子供たち： [
      {
        id: '3-1',
        pid: '3'、
        テキスト: 'セカンダリメニュー1'、
        名前: 'アイコン',
        アイコン: '例'
      },
      {
        id: '3-2',
        pid: '3'、
        テキスト: 'セカンダリメニュー2'、
        アイコン: '木'、
        子供たち： [
          {
            id: '3-2-1',
            pid: '3-2'、
            テキスト: 'レベル 3 メニュー 1'、
            名前: 'フォーム',
            アイコン: 'フォーム'
          },
          {
            id: '3-2-2',
            pid: '3-2'、
            テキスト: 'レベル 3 メニュー 2'、
            名前: 'menu1-1',
            アイコン: 'フォーム'
          },
          {
            id: '3-2-3',
            pid: '3-2'、
            テキスト: 'レベル 3 メニュー 3'、
            名前: 'メニュー1-2',
            アイコン: 'フォーム'
          },
          {
            id: '3-2-4',
            pid: '3-2'、
            テキスト: 'レベル 3 メニュー 4'、
            名前: 'メニュー1-3',
            アイコン: 'フォーム'
          }
        ]
      }
    ]
  },
  {
    id: '99',
    pid: '-1',
    テキスト: '会社のウェブサイト'、
    アイコン: 'テーブル',
    名前: '外部リンク'
  }
]

// このシステムのすべてのルートを定義します。特定のルートはメニューデータによってフィルタリングされます。export const asyncRoutes = {
  'ダッシュボード': {
    パス: '/dashboard',
    コンポーネント: レイアウト、
    子供たち： [{
      パス: 'ダッシュボード',
      名前: 'ダッシュボード'、
      コンポーネント: () => import('@/views/dashboard/index')
    }]
  },
  '製品'： {
    パス: '/product',
    コンポーネント: レイアウト、
    子供たち： [{
      パス: '/product',
      名前: '製品',
      コンポーネント: () => import('@/views/Product/index')
    }]
  },

  .............................. // 'icon' 部分を省略: {
    パス: '/icon',
    コンポーネント: レイアウト、
    子供たち： [{
      パス: '/icon',
      名前: 'アイコン',
      コンポーネント: () => import('@/views/icons/index')
    }]
  },

  '外部リンク': {
    パス: 'http://www.iqidi.com',
    名前: '外部リンク'
  }
}

const createRouter = () => 新しいルーター({
  // モード: 'history'、// サービスサポートが必要
  スクロール動作: () => ({ y: 0 }),
  ルート: 定数ルート
})

定数ルーター = createRouter()

// ルートエクスポート関数をリセットする resetRouter() {
  定数 newRouter = createRouter()
  router.matcher = newRouter.matcher // ルーターをリセットする
}

router.beforeEach(async(to, from, next) => {

定数状態 = {
  メニュー項目: [],
  ルート: [],
  ルートを追加: [],
  非同期ルート: 非同期ルート
}

// ルートとメニューの変更を定義します
const 変異 = {
  SET_ROUTES: (状態、ルート) => {
    // var list = convertRoute(routes)
    routes.push({ path: '*', redirect: '/404', hidden: true }) // これはデフォルトのエラールートです state.addRoutes =routes
    state.routes = [].concat(routes) // 定数Routes.concat(routes)
  },
  SET_MENUS: (状態、メニュー) => {
    state.menuItems = メニュー
  }
}

// 動的ルートを生成するためのアクション処理を定義します const actions = {
  ルートを生成する({コミット}, ロール) {
    新しいPromiseを返します(resolve => {
      getMenus().then(res => {
        const menus = res.data || [] // インターフェースを通じてメニュー情報を一様に取得する constroutes = []

        menus.forEach(item => {
          filterRoutes(ルート、項目)
        })
        console.log(routes) // ルートを印刷 commit('SET_ROUTES',routes)
        commit('SET_MENUS', メニュー)
        解決(ルート)
      });
    })
  }
}

エクスポートデフォルト{
  名前空間: true、
  州、
  突然変異、
  アクション
}