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

Beispielanalyse zum Exportieren, Importieren und Kopieren von Docker-Images

Die erste Lösung besteht darin, das Bild in ein ö...

So ändern Sie das Root-Passwort von MySQL unter Linux

Vorwort Der Dienst wird seit mehreren Monaten auf...

Linux verwendet NetworkManager, um Ihre MAC-Adresse zufällig zu generieren

Egal, ob Sie zu Hause auf dem Sofa oder draußen i...

Beispiel für die Mosaikierung eines Bildes mit js

Dieser Artikel stellt hauptsächlich ein Beispiel ...

Vue implementiert ein einfaches Einkaufswagenbeispiel

In diesem Artikelbeispiel wird der spezifische Co...

Schritt-für-Schritt-Anleitung zum Erstellen einer Kalenderkomponente mit React

Inhaltsverzeichnis Betriebswirtschaftlicher Hinte...

CSS-Code zur Steuerung der Hintergrundfarbe der Webseite

Ich glaube, jeder macht sich oft Sorgen, ob er Bi...

Einrichten eines globalen Shadowsocks+Polipo-Proxys in einer Linux-Umgebung

1. Installieren Sie Shadowsocks sudo apt-get inst...

Docker erstellt Schritte zur Implementierung von Kubectl-Images

Wenn der Programmdienst mit k8s bereitgestellt wi...

Linux verwendet den Befehl lsof, um den Status des Dateiöffnens zu überprüfen

Vorwort Wir alle wissen, dass unter Linux „alles ...

Beispielcode, der gängige Grafikeffekte in CSS-Stilen zeigt

Lassen Sie mich kurz einige gängige Grundgrafiken...