Vue implementiert eine teilweise Aktualisierung der Seite (Router-View-Seitenaktualisierung)

Vue implementiert eine teilweise Aktualisierung der Seite (Router-View-Seitenaktualisierung)

Verwenden provide+inject in Vue

Zuerst müssen Sie App.vue ändern.

<Vorlage>
  <!-- Unternehmensleitung -->
  <div Klasse="UnternehmenVerwalten">
    <router-view v-if="isRouterAlive"></router-view>
  </div>
</Vorlage>

<Skript>
Standard exportieren {
  Name: "companyManage",
  betrachten: {},
  bieten() {
    zurückkehren {
      neu laden:dieses.neu laden
    }
  },
  Daten() {
    zurückkehren {
      isRouterAlive:true
    };
  },
  Methoden: {
    neu laden() {
      this.isRouterAlive = falsch;
      dies.$nextTick( () => {
        dies.isRouterAlive = true;
      })
    }
  },
  montiert() {}
};
</Skript>

<Stilbereich>
.UnternehmenVerwalten {
  Breite: 100 %;
  Höhe: 100%;
  Position: relativ;
  Hintergrund: #fff;
}
</Stil>

Bildbeschreibung hier einfügen

2. Gehen Sie zu der Seite, die aktualisiert werden muss, um darauf zu verweisen, importieren Sie die Referenz per Injection neu und rufen Sie sie dann direkt auf.

Bildbeschreibung hier einfügen

injizieren:["neu laden"],
dies.neu laden();

Bildbeschreibung hier einfügen

Dies ist das Ende dieses Artikels über die teilweise Seitenaktualisierung von Vue (Seitenaktualisierung in der Router-Ansicht). Weitere relevante Inhalte zur teilweisen Seitenaktualisierung von Vue finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

Das könnte Sie auch interessieren:
  • Beispiel für die Implementierung einer teilweisen Aktualisierung in Vue

<<:  Untersuchen der Verwendung von Prozentwerten in der Eigenschaft „Hintergrundposition“

>>:  Tutorial zur Installation von Nginx in einer Linux-Umgebung

Artikel empfehlen

Beispiel zum Erstellen eines öffentlichen Harbor-Repository mit Docker

Im vorherigen Blogbeitrag ging es um das private ...

Implementierungscodebeispiel für die lokale Verzeichniszuordnung von Nginx

Manchmal müssen Sie auf einige statische Ressourc...

Schritte zur Installation von MySQL 8.0.23 unter Centos7 (Anfängerstufe)

Lassen Sie mich zunächst kurz erklären, was MySQL...

Implementierung der Nginx-Konfiguration HTTPS-Sicherheitsauthentifizierung

1. Der Unterschied zwischen HTTP und HTTPS HTTP: ...

Detaillierter Code zur Implementierung einer 3D-Tag-Cloud in Vue

Vorschau: Code: Seitenabschnitte: <Vorlage>...

Implementierung der kollaborativen Nutzung von React-Komponenten

Inhaltsverzeichnis Verschachtelung Kommunikation ...