Lösung, wie der Vue-Router auf Änderungen der Routing-Parameter reagiert

Der Inhalt dieses Artikels befasst sich mit der Lösung, mit der Vue-Router auf Änderungen in den Routing-Parametern reagieren können. Ich hoffe, dass er für Sie hilfreich ist.

1. Zur Erinnerung: Bei der Verwendung von Routing-Parametern, z. B. beim Navigieren von /user/foo nach /user/bar, wird die ursprüngliche Komponenteninstanz wiederverwendet. Da beide Routen dieselbe Komponente rendern, ist die Wiederverwendung effizienter als die Zerstörung und Neuerstellung. Dies bedeutet jedoch auch, dass der Lifecycle-Hook der Komponente nicht mehr aufgerufen wird.
Nur ​​die Parameter der Route haben sich geändert und die Route wird standardmäßig nicht aktualisiert.
Um dieses Problem zu lösen
Wenn Sie es nicht wiederverwenden möchten, fügen Sie einen Schlüssel zur Router-Ansicht der übergeordneten Komponente hinzu
< ;/router-view>

2. Es ist das Problem mit dem weißen Bildschirm von Vue-Router IOS. Das ist wirklich nervig
Problembeschreibung:

Enter Seite A——> ;B Seite——>ios integrierte Rückgabe——>Weißer Bildschirm erscheint——>Manuell auf den weißen Bildschirm klicken——>Problemlösung

Ursachenanalyse:

Wenn Sie Webview zum Entwickeln eines Vue-Projekts auf einem iOS-Computer verwenden, kann go History(-1) die Höhe des Körpers nicht nach unten ziehen, wodurch er verdeckt wird. Die Maske kann nur durch Auslösen eines leichten Klicks entfernt werden

Lösungsimplementierungsprinzip:

HTML und Body sind beide 100%, #app unterstützt die Benachrichtigung des übergeordneten Elements, aber der Standard-Scroll-Scroll des Browsers ist nicht #app, sondern Body. Einige Faktoren machen eine Wiederherstellung nach der Rückkehr zum Verlauf unmöglich (iOS-Fehler). Aus diesem Grund haben wir #app unbedingt erneut positioniert und zum Scrollobjekt gemacht, wodurch das Problem gelöst wurde

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  position: relative;
}
#app {
  width: 100%;
  height: 100%;
  background: #fff;
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
  position: absolute;
  left:0;
  top:0;
}

#app 是父节点，最外层的container。根据具体情况而定

Das obige ist der detaillierte Inhalt vonLösung, wie der Vue-Router auf Änderungen der Routing-Parameter reagiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!