Vue の動的メニュー、動的ルートの読み込みと更新の落とし穴

'vue' から Vue をインポートします
'vue-router' から Router をインポートします。
'@/layout' からレイアウトをインポートします

Vue.use(ルーター)

エクスポートconst定数ルート= [{
  パス: '/login',
  名前: 'ログイン',
  コンポーネント: () => import('@/views/login/index'),
  非表示: true、
}, {
  パス: '/404',
  名前: '404',
  コンポーネント: () => import('@/views/error-page/404'),
  非表示: true
}, {
  パス: '/401',
  名前: '401',
  コンポーネント: () => import('@/views/error-page/401'),
  非表示: true
}, {
  パス： '/'、
  コンポーネント: レイアウト、
  リダイレクト: '/dashboard',
  子供たち： [
    {
      パス: 'ダッシュボード',
      コンポーネント: () => import('@/views/dashboard/index'),
      名前: 'ダッシュボード'、
      meta: { title: 'ホームページ', icon: 'ドキュメント' }
    },
    {
      パス: 'xxx',
      コンポーネント: () => import('xxxxx'),
      名前: 'xxx',
      meta: { タイトル: 'XXX', アイコン: 'コンポーネント' },
      子供たち： [
          {
            パス: 'ホスト',
            名前: 'ホスト',
            メタ: { 
              タイトル: 'xxx', 
              キー: 'ホスト'
            }
          },
          {
            パス: 'コントロール',
            名前: 'コントロール',
            常に表示: true、
            メタ: { 
              タイトル: 'xxx', 
              キー: 'コントロール'
            },
            子供たち： []
          },
          {
            パス: 'signal',
            名前: 'シグナル'、
            常に表示: true、
            メタ: { 
              タイトル: 'xxx', 
              キー: 'シグナル'、
            },
            子供たち： [] 
          },
          {
            パス: 'ゲートウェイ',
            名前: 'ゲートウェイ'、
            常に表示: true、
            メタ: { 
              タイトル: 'xxx', 
              キー: 'ゲートウェイ'
            },
            子供たち： []
          } 
      ]
    },
    {
      パス: '会議'、
      名前: 'meting',
      メタ: { タイトル: 'xxx'、アイコン: 'リスト' }
    },
    {
      パス: 'トレース'、
      コンポーネント: () => import('@/views/xxx'),
      名前: 'トレース'、
      meta: { タイトル: 'xxx'、アイコン: 'チャート' }
    }
]
}, 
  {
    パス： '*'、
    リダイレクト: '/404'、
    非表示: true
  }
]

const router = 新しいルーター({
  // モード: 'history'、// サービスサポートが必要
  スクロール動作: () => ({
    年: 0
  }）、
  //routes: constantRoutes は初期化を保護します。ここではコメントアウトされています})

//重複ルートの問題を解決する router.$addRoutes = (params) => {
  router.matcher = new Router({ // ルーティングルールをリセットする scrollBehavior: () => ({
      年: 0
    })
  }).マッチャー
  router.addRoutes(params) // ルートを追加}

デフォルトルーターをエクスポートする

// 動的ルートを保護するためにルートを監視する router.beforeEach((to, from, next) => {
  
  定数ルート = store.state.app.routes

  console.error('beforeEach ガードが実行されました')

  //最初のロード更新を処理する if (routes.length === 0) {
     console.error('初回/更新')

     //ルートキャッシュを更新 const cacheRoute = getLocalRouteInfo()
     
     定数ルート値 = asyncRouteDataToRoute(cacheRoute.asyncRouteData、定数ルート)
     
     店
      .dispatch('app/setRoutes', ルート値)

     ルーター.$addRoutes([...routeValue])

     次（{
        ...に、
        置き換え: 真
     })
     戻る
   } 

   次（）
})

/**
 * 第3レベルのサブメニュールーティングメタデータを更新します */
エクスポートconst updateIPChildRoutes = function(routes, path, children) {
    setRouteArrayChildren(ルート、パス、子) を返します。
}

/**
 * 親メニューに従ってサブメニューをロードします * @param {*} routeKey 
 * @戻り値 
 */
エクスポートconst generateIPChildRoutes = function(routeKey) {
    新しい Promise を返します ((resolve, reject) => {
      if (!routeKey) 戻り値
      
      
      // 定数 start = getDateSeconds(新しい Date())
      // 定数 end = setDateSeconds(new Date(), 15, 'm')
      
      const filterAddr = grafanaAddrs.filter(addr => addr.key === routeKey)[0]
      定数マッチアップ = filterAddr.matchup
  
      定数パラメータ = {
        マッチアップ
      } 
  
      //ルーターを動的に追加
      試す {
        fetchIPInstance(params).then(ipAddrs => {
          定数ipRoutes = []
          ipAddrs.forEach(
            アドレス => {
                const ipInstance = addr.instance.replace(/^(.*):.*$/, "$1")
  
                if(!isIPAddress(ipInstance)) 
                  戻る
  
                const 存在するルート = ipRoutes.find(ip => ip.meta && ip.meta.key === ipInstance)
  
                !existRoute && ipRoutes.push(
                  {
                    パス: ipInstance、
                    名前: ipInstance、
                    メタ: { 
                        タイトル: ipInstance、 
                        キー: ipInstance
                    }
                  }
                ）
            }
          ）
          解決(ipRoutes)
        })
      } キャッチ（エラー）{
        拒否(エラー)
        console.error(`サブメニューの読み込みエラー`)
      }
    })
}

'./tool' から { isArray, setRouteArrayChildren } をインポートします。

// ルート キャッシュ値を設定します。const localRouteKey = "LOCALROUTESET";

/**
 * currentPath: '' //現在アクセスされているルートパス* routeData: [], //保存された完全なルートデータ（メニューの読み込みにのみ使用可能）
 * asyncRouteData: [] //動的ルートデータ（新しいルートを生成するために使用）
 * {
 * parentKey //親キー
 * ルート: [
 * {
            パス： 、
            名前： 、
            メタ: { 
                タイトル： 、 
                鍵： 
            }
        }
 * ]
 * }
 */

エクスポート関数 getLocalRouteInfo() {
  定数データ = localStorage.getItem(localRouteKey);

  データを返します? JSON.parse(data) : {};
}

エクスポート関数setLocalRouteInfo(data) {
  定数 localData = getLocalRouteInfo();

  ローカルストレージ.setItem()
    ローカルルートキー、
    JSON.stringify({
      ...ローカルデータ、
      ...データ、
    })
  );
}

エクスポート関数removeLocalRouteInfo() {
  ローカルストレージからアイテムを削除します。
}

/**
 * ローカルキャッシュをルーティングメタデータに変換* @param {*} constantRoutes ルーティングテンプレート*/
エクスポート関数 asyncRouteDataToRoute(asyncRouteData, constantRoutes) {
   ルートを定数ルートとする
   (isArray(asyncRouteData) && asyncRouteData.length > 0) の場合 {
     非同期ルートデータ.forEach(
        データ => {
          ルート = setRouteArrayChildren(ルート、data.parentKey、data.route)
        }
     ）
   }
   帰り道
}

/**
 * ルートの子属性を設定する * @param {*} ルート 
 * @param {*} パス 
 * @param {*} 子 
 * @戻り値 
 */
エクスポートconst setRouteArrayChildren = function(ルート、パス、子) {

  if (!isArray(ルート) || !パス)
     新しい配列を返す()
  
  for (const ルートのルート) {
    if (isArray(route.children)) {
      （route.path === パス && route.children.length === 0）の場合{
        ルート.children.push(...children)
      } それ以外 {
        setRouteArrayChildren(ルート.children, パス, children)
      }
    }
  }

  帰りのルート
}

onExpandMenu(キー、キーパス) {
      console.error(キー、キーパス)

      定数パス = key.substring(key.lastIndexOf('/') + 1)
      console.error(パス)
      

      //監視レベル3のメニュー/ルーティングを動的に生成 const ipAddrKeys = []
      grafanaAddrs.forEach(
        アドレス => {
          if (addr.matchup) {
            ipAddrKeys.push(addr.key)
          }
        }
      ）

      if (path && ipAddrKeys.includes(path)) {

         IPChildRoutesを生成する(パス)
         .then(ipAddrs => {
           
          if (isArray(ipAddrs)) {

            //動的ルーティングデータをキャッシュする const localRouteInfo = getLocalRouteInfo()
            const cacheRoutes = localRouteInfo.asyncRouteData || []
            キャッシュルート.push(
                {
                    親キー: パス、
                    ルート:ipアドレス
                }
              ）
            ローカルルート情報を設定する({
              非同期ルートデータ: キャッシュルート
            })

            //ルートを更新
            asyncRoutes = store.state.app.routes とします。

            asyncRoutes = updateIPChildRoutes(asyncRoutes、パス、ipAddrs)
            
            店
              .dispatch('app/setRoutes', asyncRoutes)
            
            ルーター.$addRoutes([...asyncRoutes])

          }
         })
      }
    }