バックエンド管理システムを構築するためのvue-element-adminの実装手順

/**
 * バックグラウンドでクエリされたメニューデータは、ルーティング形式のデータに組み立てられます* @param ルート
 */
エクスポート関数generaMenu(ルート、データ) {
 
    データ.forEach(アイテム => {
        メニューを = {
            パス: item.url、
            子供たち： []、
            名前: 'menu_' + アイテムID,
            meta: { title: item.name、 id: item.id、 icon:item.icon}
        }
        // console.log(item.url.indexOf('ダッシュボード'))
 
        // コンソールログ(item.children)
        if (item.children) {
            // console.log(item.children.length)
            （アイテムの子供の長さ＞0）の場合{
                menu.redirect = item.children[0].url
                menu.component = レイアウト
            } それ以外 {
                // menu.component = () => import(`@/views${item.url}/index`)
                menu.component = () => Promise.resolve(require(`@/views${item.url}`).default)
 
            }
            if (item.url && item.url.indexOf('ダッシュボード') != -1) {
                メニュー = {
                    パス： '/'、
                    コンポーネント: レイアウト、
                    リダイレクト: '/dashboard',
                    子供たち： [{
                        パス: 'ダッシュボード',
                        名前: 'ダッシュボード'、
                        コンポーネント: () => import('@/views/dashboard/index'),
                        meta: { title: 'ダッシュボード', icon: 'ダッシュボード' }
                    }]
                }
            }
            generaMenu(メニュー.children、アイテム.children)
        } それ以外 {
            console.log('子なし')
        }
        ルート.push(メニュー)
    })
}

アクション: {
        ルートを生成する({コミット},データ){
            新しいPromiseを返します(resolve => {
 
                定数loadMenuData = []
                getAuthMenu().then(res => {
                    データ = res.data とします
                    console.log('menu=>', データ)
                    コンソールログ('asyncRoutes=>>', asyncRoutes)
                    let newRoutes = [] //以前のルートをクリアする hereObject.assign(loadMenuData, data)
                    メニューを生成します(新しいルート、メニューデータを読み込みます)
                    newRoutes.push({ パス: '*'、リダイレクト: '/404'、非表示: true })
                    accessedRouters = newRoutes || [] とします
                    console.log('アクセスされたルーター', アクセスされたルーター)
                    commit('SET_ROUTERS', アクセスされたルーター)
                    解決する（）
                })
 
            })
        },
        reset_routers({ コミット }) {
            新しいPromiseを返します(resolve => {
                コミット('RESET_ROUTERS')
                解決する（）
            })
        }
    }

router.beforeEach(非同期(to, from, next) => {
    // プログレスバーを開始
    NProgress.start()
 
    // ページタイトルを設定する
    document.title = getPageTitle(to.meta.title)
 
    // ユーザーがログインしているかどうかを判定する
    定数hasToken = getToken()
 
    （トークンを持っている場合）{
        to.path === '/login'の場合{
            // ログインしている場合はホームページにリダイレクトします
            次へ({ パス: '/' })
            NProgress.done()
        } それ以外 {
            const hasGetUserInfo = store.getters.name
            (hasGetUserInfo) の場合 {
                次（）
            } それ以外 {
                試す {
                    // ユーザー情報を取得する
                    ストアを待機します。dispatch('admin/getInfo')
 
                    store.dispatch('GenerateRoutes', {}).then(() => { // アクセス可能なルーティングテーブルを生成する router.addRoutes(store.getters.addRouters) // アクセス可能なルーティングテーブルを動的に追加する console.log('to=',store.getters.addRouters)
                        next({ ...to, replace: true }) // addRoutes が完了したことを確認するためのハックメソッド。replace: true を設定して、ナビゲーションが履歴レコードを残さないようにします。
                        NProgress.done()
                    })
 
                    // 次（）
                } キャッチ（エラー）{
                    // トークンを削除し、ログインページに移動して再度ログインします
                    store.dispatch('admin/resetToken') を待機します。
                    Message.error(error || 'エラーあり')
                    次へ(`/login?redirect=${to.path}`)
                    NProgress.done()
                }
            }
        }
    } それ以外 {
        /* トークンがありません*/
 
        (whiteList.indexOf(to.path) !== -1) の場合 {
            // 無料ログインホワイトリストでは、直接
            次（）
        } それ以外 {
            // アクセス権限のない他のページはログイン ページにリダイレクトされます。
            次へ(`/login?redirect=${to.path}`)
            NProgress.done()
        }
    }
})