vue-element-adminフレームワークを使用して、バックエンドからメニュー機能を動的に取得します。

エクスポートconst asyncRoutes = [
  { パス: '*'、リダイレクト: '/404'、非表示: true }
] 

'@/router' から { asyncRoutes, constantRoutes } をインポートします。
'@/api/user' から { fetchUserMenuList } をインポートします。
'@/layout' からレイアウトをインポートします

/**
 * 静的ルートの遅延読み込み * @param ビュー形式はスラッシュなしの xxx/xxx で始まる必要があります * @returns 
 */
エクスポートconst loadView = (view) => {
  戻り値 (解決) => require([`@/views/${view}.vue`], 解決)
}

/**
 * バックエンドからクエリされたメニューデータをルーティング形式のデータに組み立てる* @paramroutes
 * @param data バックエンドから返されるメニューデータ */
エクスポート関数generaMenu(ルート、データ) {
  データ.forEach(アイテム => {
    const メニュー = {
      パス: item.url、 
      コンポーネント: item.component === '#' ? レイアウト: loadView(item.component), 
      hidden: item.status === 0, // ステータス 0 の非表示リダイレクト: item.redirect,
      子供たち： []、
      名前: アイテムコード、
      メタ: アイテム.meta
    }

    if (item.children) {
      generaMenu(メニュー.children、アイテム.children)
    }
    ルート.push(メニュー)
  })
  帰りのルート
}

定数状態 = {
  ルート: [],
  ルートを追加: []
}

const 変異 = {
  SET_ROUTES: (状態、ルート) => {
    state.addRoutes = ルート
    // 静的ルートと動的ルートを連結する state.routes = constantRoutes.concat(routes)
  }
}

定数アクション = {
  generateRoutes({ commit }, トークン) {
    新しいPromiseを返します(resolve => {
      // トークンを介してバックエンドからユーザーメニューを取得し、それをグローバル状態に追加します fetchUserMenuList(token).then(res => {
        const menuData = Object.assign([], res.data)
        const tempAsyncRoutes = Object.assign([], asyncRoutes)
        const accessedRoutes = generaMenu(tempAsyncRoutes、menuData)

        commit('SET_ROUTES', アクセスされたルート)
        解決(アクセスされたルート)
      }).catch(エラー => {
        コンソール.log(エラー)
      })
    })
  }
}

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

'vue' から Vue をインポートします
'vuex' から Vuex をインポートします
'./getters' からゲッターをインポートします

Vue.use(Vuex)

// https://webpack.js.org/guides/dependency-management/#requirecontext
const modulesFiles = require.context('./modules', true, /\.js$/)

// `import app from './modules/app'` は必要ありません
// モジュールファイルからすべての vuex モジュールを自動的に要求します
const モジュール = modulesFiles.keys().reduce((モジュール、モジュールパス) => {
  // './app.js' を 'app' に設定
  定数 moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
  定数値 = modulesFiles(modulePath)
  モジュール[モジュール名] = 値.default
  リターンモジュール
}, {})

定数ストア = 新しい Vuex.Store({
  モジュール、
  ゲッター
})

デフォルトストアをエクスポート

メニュールート: 状態 => state.permission.routes 

ルート() {
      // this.$router.options.routes を返します
      this.$store.getters.menusRoutes を返します
    }, 

 // メニューを取得します。他のファイルでアクションを呼び出す場合は、{root: true}を追加する必要があります。
          ディスパッチ('permission/generateRoutes', データ, { ルート: true }).then((accessRoutes) => {
            ルータ.addRoutes(アクセスルート)
          }) 

const accessRoutes = store.dispatch('permission/generateRoutes', store.getters.token) を待機します
          ルータ.addRoutes(アクセスルート)
          次({ ...to, 置き換え: true })