Vue/React-Einzelseitenanwendung zurück ohne Aktualisierungslösung

Einführung

Das Aktualisieren beim Vorwärtsgehen und das Nicht-Aktualisieren beim Zurückgehen ist eine Funktion, die der von App-Seiten ähnelt. Dies ist jedoch in einer einseitigen Webanwendung nicht einfach umzusetzen.

Warum die Mühe?

Das Rendering-Prinzip von Spa (am Beispiel von Vue): Die Änderung der URL löst onHashChange/pushState/popState/replaceState aus, und der Pfadname in der URL wird verwendet, um mit der in der Route definierten Komponente übereinzustimmen, sie zu laden, zu instanziieren und in der Export-Router-Ansicht des Projekts zu rendern.

Mit anderen Worten: Das Parsen und Rendern einer Instanz bedeutet die Zerstörung einer anderen Instanz, da es nur einen Rendering-Ausgang gibt.

Warum funktioniert Keep-Alive nicht? Da das Prinzip von Keep-Alive darin besteht, die instanziierten Komponenten zu speichern, wird die URL beim nächsten Mal, wenn sie mit der geänderten Komponente übereinstimmt, zuerst aus dem Speicher geholt.

Vue bietet jedoch nur eine Möglichkeit, auf den Speicher zuzugreifen, nicht aber, ihn zu löschen. Daher ist die Implementierung eines „Forward Refresh“ nicht möglich.

Eine Lösung besteht darin, Vorwärts- und Rückwärtsentscheidungen manuell anhand von „von“ und „von“ zu treffen. Diese Entscheidung kann mit komplexer Sprunglogik nicht umgehen und ist schlecht wartbar.

Community-Lösungen mit Fallstricken (am Beispiel von Vue)

vue-page-stack , vue-navigation .
Beide Lösungen haben offensichtliche Nachteile: Erstere unterstützt kein verschachteltes Routing und in manchen Szenarien kann sich die URL ändern und die Seite reagiert möglicherweise überhaupt nicht mehr; letztere weist ähnliche Fehler auf. Und beide Lösungen sind sehr invasiv, da sie auf der magischen Modifikation des Vue-Routers basieren. Und es werden der URL bedeutungslose Zusatzfelder (StackID) hinzugefügt.

Guter Plan im Moment

Jetzt gibt es eine praktikable und einfache Lösung: verschachtelte Unterrouten + gestapelte Seiten.
Die Inspiration zum Stapeln von Seiten: Webview in Webview in nativen Anwendungen, Fenster in Fenster in mehrseitigen Anwendungen.
Um eine Rückkehr ohne Aktualisierung in SPA zu erreichen, besteht das Wesentliche darin, die Koexistenz mehrerer Instanzen zu erreichen.
Der Kern dieser Lösung besteht darin, die Koexistenz mehrerer Instanzen durch verschachtelte Unterrouten zu erreichen und eine visuelle Seitenstapelung durch CSS-Absolute zu erreichen.

Effektbild

Implementierung in Vue

In der Routenkonfigurationsdatei:

Home aus "../views/Home.vue" importieren;

const Routen = [
  {
    Pfad: "/home",
    Name: "Home",
    Komponente: Home,
    Kinder: [
      {
        Pfad: "sub",
        Komponente: () =>
          importiere(/* webpackChunkName: "sub" */ "../views/Sub.vue"),
      },
    ],
  },
];

Standardrouten exportieren;

Startseite:

<Vorlage>
  <div Klasse="Startseite">
    <input v-model="Eingabewert" />
    <h3>{{ Eingabewert }}</h3>
    <button @click="handleToSub">zum Abo</button>
    <router-view @reload="handleReload" />
  </div>
</Vorlage>

<Skript>
Standard exportieren {
  Name: "Home",
  Daten() {
    zurückkehren {
      Eingabewert: "",
    };
  },
  Methoden: {
    handleToSub() {
      // Beachten Sie, dass das Routing-Format auf dem Sub unter der vorherigen Route /home basiert, nicht auf einem unabhängigen /sub
      dies.$router.push("/home/sub");
    },

    handleReload(Wert) {
      // Hier können Sie einige Vorgänge ausführen, um Daten erneut abzurufen, z. B. Daten auf der Detailseite ändern und die Liste nach der Rückgabe von console.log("reload", val); erneut abrufen.
    },
  },
  montiert() {
    // Die Unterseite kehrt zurück und der Lebenszyklus wird nicht erneut ausgeführt console.log("mounted");
  },
};
</Skript>

<Stilbereich>
.heim {
  Position: relativ;
}
</Stil>

Unterseiten:

<Vorlage>
  <div Klasse="sub">
    <h1>Dies ist eine Unterseite</h1>
  </div>
</Vorlage>

<Skript>
Standard exportieren {
  vorZerstören() {
    // Sie können benutzerdefinierte Parameter übergeben. Wenn Sie diese nicht benötigen, müssen Sie dies nicht tun.$emit("reload", 123);
  },
};
</Skript>

<Stilbereich>
.unter {
  Position: absolut;
  links: 0;
  oben: 0;
  Breite: 100 %;
  Höhe: 100%;
  Hintergrundfarbe: #fff;
}
</Stil>

Implementierung in React

Auf Routen:

importiere { Route } von „react-router-dom“;

const Routen = () => {
  zurückkehren (
    <>
      {/* Sie können hier nicht „exakt“ hinzufügen, da Sie zuerst die übergeordnete Seite und dann die untergeordnete Seite zuordnen müssen*/}
      <Routenpfad="/home" Komponente={lazy(() => import("../views/Home"))} />
    </>
  );
};

Standardrouten exportieren;

Startseite:

importiere React, { useEffect, useState } von "react";
importiere { Route, useHistory } von „react-router-dom“;
Importiere Stile aus „Styled-Components“;
importiere Sub aus "./Sub";

const HomeContainer = styled.div`
  Position: relativ;


const Home: React.FC = () => {
  const [Eingabewert, gesetzter Eingabewert] = useState("");
  const history = useHistory();

  const handleToSub = () => {
    Verlauf.push("/home/sub");
  };

  const handleReload = (Wert: Zahl) => {
    console.log("neu laden", val);
  };

  useEffect(() => {
    console.log("gemountet");
  }, []);

  zurückkehren (
    <HomeContainer>
      <Eingabe
        Wert={Eingabewert}
        beiÄnderung={(e) => setzeEingabewert(e.Ziel.Wert)}
      />
      <h3>{Eingabewert}</h3>
      <button onClick={handleToSub}>zum Abo</button>
      <Route
        Pfad="/home/sub"
        Komponente={() => <Sub handleReload={handleReload} />}
      />
    </HomeContainer>
  );
};

Standard-Homepage exportieren;

Unterseiten:

importiere React von „react“;
Importiere Stile aus „Styled-Components“;

const SubContainer = styled.div`
  Position: absolut;
  links: 0;
  oben: 0;
  Breite: 100 %;
  Höhe: 100%;
  Hintergrundfarbe: #fff;


Typ SubProps = {
  handleReload: (Wert: Zahl) => ungültig;
};

const Sub: React.FC<SubProps> = ({ handleReload }) => {
  useEffect(() => {
   return () => handleReload(123);
  }, []);
  
  zurückkehren (
    <Untercontainer>
      <h1>Dies ist eine Unterseite</h1>
    </Untercontainer>
  );
};

Standard-Sub exportieren;

Nicht zum Thema

Im Kernprojekt meines früheren Unternehmens „Ping An Good Car Owner“ habe ich diese Lösung in einigen neuen h5-Projekten verwendet und sie hat den Test von mehr als 1,7 Millionen Online-Besuchen bestanden. Diese h5-Lösung wird derzeit bei Shopee beworben. Aufgrund ihrer einfachen Logik wurde sie von vielen Kollegen erkannt und verwendet. Ein gängiges Beispiel ist beispielsweise: Auf der Listenseite gibt es Suchbedingungen. Rufen Sie die Detailseite auf, und kehren Sie dann zurück. Probieren Sie es einfach aus, Sie werden überrascht sein.

Vorteile dieses Programms

• Einfache Implementierung, nicht-intrusive Modifikation, fast keine Logik;
• Unterseiten können für den Zugriff Dritter gesondert bereitgestellt werden;
• Vollständige Koexistenz mehrerer Instanzen, keine Aktualisierung beim Zurückgehen;
• Kann wie Eltern-Kind-Komponenten kommunizieren und beim Verlassen der Kindseite mithören;

Mangel

Das Routing-Format muss geändert und verschachtelt werden, mit bestimmten Anforderungen an die URL.
GitHub-Adresse
https://github.com/zhangnan24/no-refresh-back-vue

Dies ist das Ende dieses Artikels über die Back-Not-Refresh-Lösung für Vue/React-Einzelseitenanwendungen. Weitere relevante Inhalte zu Back-Not-Refresh für Vue/React finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!