Vue Routerはバックグラウンドデータに応じて異なるコンポーネントをロードします

{
  パス: 'shopKPI',
  // バックグラウンドデータを事前にストアに保存しておけば、ここでストアデータにアクセスして直接判断できます // ただし、この特定のビジネスページのデータはグローバルストアに配置され、他の場所では使用されないため、実際には不要なコンポーネントです: () => import('@/views/store/dataVersion'),
  名前: 'store_KPI',
  メニュー名: 'ショップコンサルタント',
  メタ: {
    コード: ['storeProduct.detail']
  }
}

<!-- ChooseShopKPI.vue -->
<テンプレート>
  <dataVersion v-if="!useNewShopKPI" />
  <ShopKPI v-else />
</テンプレート>

<スクリプト>
'lodash' から { get } をインポートします。
'@/api/store' から { getStoreReportFormVersion } をインポートします。
'./dataVersion' から dataVersion をインポートします。
'./ShopKPI' から ShopKPI をインポートします。

エクスポートデフォルト{
  名前: 'ChooseShopKPI',

  コンポーネント:
    データバージョン、
    ショップKPI、
  },

  データ（） {
    戻り値: {useNewShopKPI: false };
  },

  作成された() {
    getStoreReportFormVersion().then((res) => {
      （res、'data.data.new'）を取得する場合）{
        this.useNewShopKPI = true;
      }
    });
  },
};
</スクリプト>

<style lang="css" スコープ></style>

{
  パス: 'shopKPI',
  // 事前に背景データを取得しておけば、ここでストアデータにアクセスして直接判断できます // ただし、この特定のビジネスページのデータはグローバルストアに配置され、他の場所では使用されないため、実際には不要です - コンポーネント: () => import('@/views/store/dataVersion'),
+ コンポーネント: () => import('@/views/store/ChooseShopKPI'),
  名前: 'store_KPI',
  メニュー名: 'ショップアドバイザー',
  メタ: {
    コード: ['storeProduct.detail']
  }
}

<!-- DynamicLoadComponent.vue -->
<テンプレート>
  <コンポーネント:is="comp" />
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  名前: 'DynamicLoadComponent',
  小道具: {
    レンダリングコンポーネント: {
      タイプ: 約束、
    },
  },
  データ（） {
    戻る {
      comp: () => this.renderComponent
    }
  },
  マウント() {},
};
</スクリプト>

<style lang="css" スコープ></style>

{
  パス: 'shopKPI',
  コンポーネント: () => import('@/views/store/components/DynamicLoadComponent'),
  名前: 'store_KPI',
  メニュー名: 'ショップコンサルタント',
  メタ: {
    コード: ['storeProduct:detail'],
  },
  プロパティ: (ルート) => ({
    レンダリングコンポーネント: 新しい Promise((resolve, deny) => {
      getStoreReportFormVersion()
        .then((レスポンスデータ) => {
          レスポンスデータに新しいショップKPI を追加します。
          定数useOldShopKPI = get(
            レスポンスデータ、
            'データ.データ.ストア_データ_表示'
          );

          (新しいショップKPIを使用する場合) {
            解決します(インポート('@/views/store/ShopKPI'));
          } そうでない場合 (OldShopKPI を使用) {
            解決します(インポート('@/views/store/dataVersion'));
          } それ以外 {
            解決します(インポート('@/views/store/ShopKPI/NoKPIService'));
          }
        })
        .catch(拒否);
    }）、
  })
}