Vue Router lädt verschiedene Komponenten je nach Hintergrunddaten

Anforderungen aus der Projektpraxis

Derselbe Link muss verschiedene Seitenkomponenten laden. Abhängig von den vom Benutzer erworbenen Diensten werden unterschiedliche Seiten angezeigt.

Es gibt einige schlechte Implementierungen

• Schreiben Sie diese Komponenten einfach unter dieselbe Komponente und beurteilen Sie sie durch v-if. Wenn Sie dies tun, müssen Sie nicht einmal vue-router verwenden. Sie können einfach alle Komponenten in eine Datei schreiben und v-if verwenden, um sie alle zu beurteilen. (Die Prämisse ist, dass es sich um Zehntausende von Codezeilen handelt, wenn Ihnen der Aufwand nichts ausmacht.)
• Fordern Sie beim Rendern dieses Links direkt die Hintergrunddaten an und rendern Sie basierend auf den Daten unterschiedliche Links. (Theoretisch ist dies möglich, aber wenn der Benutzer diese Funktion nicht verwendet, werden bei diesen Links jedes Mal im Voraus Hintergrunddaten abgerufen. Darüber hinaus ist, wenn der Benutzer den Link kennt und direkt auf den Link zugreift, immer noch eine Logik erforderlich, um zu bestimmen, welche Seite dem Benutzer angezeigt werden soll.)
• Durch den Aufruf von router.beforeEach wird jede Route abgefangen. Wenn die Route die von uns angegebene Route ist, werden die Hintergrunddaten angefordert und die Seite dynamisch gesprungen. (Die Funktion kann abgeschlossen werden, aber tatsächlich ist dies nur ein kleiner Teil des gesamten Systems und sollte nicht in das gesamte Routing-System eindringen. Wenn jede Geschäftsseite im globalen Routing-System geschrieben wird, führt dies auch dazu, dass die Routing-Logik zu kompliziert wird.)
  

Ich persönlich bin der Meinung, dass der bessere Weg zur Umsetzung

Abrufen der Serverdaten, auf denen die Route konfiguriert ist, und dynamisches Laden der entsprechenden Komponenten

{
  Pfad: 'shopKPI',
  // Wenn Sie die Hintergrunddaten vorab im Store speichern, können Sie sie direkt beurteilen, indem Sie hier auf die Store-Daten zugreifen. // Die Daten dieser spezifischen Unternehmensseite werden jedoch im globalen Store abgelegt und nirgendwo anders verwendet. Sie sind daher wirklich unnötig. Komponente: () => import('@/views/store/dataVersion'),
  Name: 'store_KPI',
  menuName: 'Shop-Berater',
  Meta: {
    Codes: ['storeProduct.detail']
  }
}

Das Ideal ist schön, aber die Realität sieht so aus, dass die von der Komponente empfangene Methode synchron ein Versprechen zurückgeben muss.

Zu diesem Zeitpunkt dachte ich an die schlechte Implementierungsmethode 1 oben und änderte sie leicht.

<!-- ChooseShopKPI.vue -->
<Vorlage>
  <dataVersion v-if="!useNewShopKPI" />
  <ShopKPI v-else />
</Vorlage>

<Skript>
importiere { get } von 'lodash';
importiere { getStoreReportFormVersion } von '@/api/store';
importiere dataVersion aus „./dataVersion“;
importiere ShopKPI aus „./ShopKPI“;

Standard exportieren {
  Name: 'ChooseShopKPI',

  Komponenten:
    Datenversion,
    ShopKPI,
  },

  Daten() {
    return { useNewShopKPI: false };
  },

  erstellt() {
    getStoreReportFormVersion().then((res) => {
      wenn (get(res, 'data.data.new')) {
        this.useNewShopKPI = wahr;
      }
    });
  },
};
</Skript>

<style lang="css" scoped></style>

Ändern Sie die Seite, die der Routendarstellung entspricht, um diese Zwischenseite ChooseShopKPI darzustellen

{
  Pfad: 'shopKPI',
  // Wenn Sie die Hintergrunddaten im Voraus erhalten, können Sie sie direkt beurteilen, indem Sie hier auf die Store-Daten zugreifen. // Die Daten dieser bestimmten Geschäftsseite werden jedoch im globalen Store abgelegt und nirgendwo anders verwendet. Daher sind sie wirklich nicht erforderlich. - Komponente: () => import('@/views/store/dataVersion'),
+ Komponente: () => import('@/views/store/ChooseShopKPI'),
  Name: 'store_KPI',
  menuName: 'Shop-Berater',
  Meta: {
    Codes: ['storeProduct.detail']
  }
}

Dadurch wird die erwartete Funktionalität erreicht.

Die Funktion wurde realisiert, aber ich habe wieder angefangen, darüber nachzudenken

Allerdings löst diese Methode das Problem des dynamischen Ladens von Seitenkomponenten sehr gut. Es traten jedoch auch einige kleinere Probleme auf.

• Wenn später weitere Seiten hinzugefügt werden, die Daten über den Server laden, werden mehrere ChooseXXX-Zwischenseiten angezeigt.
• Diese Art von Zwischenseite führt tatsächlich eine sekundäre Weiterleitung durch. Entwickler, die mit der Logik nicht vertraut sind, verstehen die Seitensprunglogik hier möglicherweise nicht, was den Verständnisaufwand erhöht.

Die endgültige Lösung - High-Level-Komponenten

Durch Abstrahieren von ChooseXXX wird es in DynamicLoadComponent umgewandelt

<!-- DynamicLoadComponent.vue -->
<Vorlage>
  <Komponente: ist = "comp" />
</Vorlage>

<Skript>
Standard exportieren {
  Name: "DynamicLoadComponent",
  Requisiten: {
    Renderkomponente: {
      Typ: Versprechen,
    },
  },
  Daten() {
    zurückkehren {
      comp: () => diese.renderComponent
    }
  },
  montiert() {},
};
</Skript>

<style lang="css" scoped></style>

Holen Sie sich die Hintergrunddaten direkt in die Routing-Konfiguration und verteilen Sie die Routen. Auf diese Weise wird die Routing-Logik in der Routing-Konfigurationsdatei konzentriert und es gibt kein sekundäres Routing. Die Wartung wird kein Problem sein.

Die Komponente DynamicLoadComponent kann auch wiederverwendet werden und alle nachfolgenden Routing-Konfigurationen zum Bestimmen der Seite zum Laden von Hintergrunddaten können an diese Zwischenkomponente weitergeleitet werden.

{
  Pfad: 'shopKPI',
  Komponente: () => import('@/views/store/components/DynamicLoadComponent'),
  Name: 'store_KPI',
  menuName: 'Shop-Berater',
  Meta: {
    Codes: ['storeProduct:detail'],
  },
  Requisiten: (Route) => ({
    renderComponent: neues Promise((auflösen, ablehnen) => {
      getStoreReportFormVersion()
        .then((responseData) => {
          const useNewShopKPI = get(responseData, 'data.data.shop_do');
          const useOldShopKPI = get(
            Antwortdaten,
            „Daten.Daten.Speichern_Daten_Anzeigen“
          );

          wenn (useNewShopKPI) {
            lösen (importieren ('@/views/store/ShopKPI'));
          } sonst wenn (useOldShopKPI) {
            lösen (importieren ('@/views/store/dataVersion'));
          } anders {
            lösen(importieren('@/views/store/ShopKPI/NoKPIService'));
          }
        })
        .fangen(ablehnen);
    }),
  })
}

Onlinebeispiel ansehen (unterstützt nur Chrome)
https://stackblitz.com/edit/vuejs-starter-jsefwq?file=index.js

Dies ist das Ende dieses Artikels über das Laden verschiedener Komponenten durch Vue Router je nach Hintergrunddaten. Weitere Informationen zum Laden verschiedener Komponenten durch Vue Router je nach Hintergrunddaten finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!