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    

Artikel empfehlen

So installieren Sie die Odoo12-Entwicklungsumgebung unter Windows 10

Vorwort Da viele Freunde sagen, dass sie keinen M...

WiFi-Entwicklung | Einführung in die WiFi-Wireless-Technologie

Inhaltsverzeichnis Einführung in die WiFi-Wireles...

Führen Sie die Schritte zum Einrichten automatischer Updates in CentOS 8 aus

Das Beste, was Sie für Ihre Daten und Computer tu...

Detaillierte Erklärung, wo Docker Protokolldateien speichert

Inhaltsverzeichnis Wo werden die Protokolle gespe...

Vue + Spring Boot realisiert die Bestätigungscodefunktion

In diesem Artikelbeispiel wird der spezifische Co...

Beispiel für die Mosaikierung eines Bildes mit js

Dieser Artikel stellt hauptsächlich ein Beispiel ...

So stellen Sie mit Navicat Premium eine Remoteverbindung zur MySQL-Datenbank her

Derjenige, der eine neue Verbindung herstellt, en...

XHTML-Tutorial: XHTML-Grundlagen für Anfänger

<br />Der Inhalt dieser Site ist Original. B...

Meta-Tags einfach erklärt

Der META-Tag, umgangssprachlich auch als Tag beze...