So verwenden Sie Vue Mobile Routing Switching

Dieses Mal zeige ich Ihnen, wie Sie Vue Mobile Routing Switching verwenden und welche Vorsichtsmaßnahmen bei der Verwendung von Vue Mobile Routing Switching gelten. Hier sind praktische Fälle, schauen wir uns das an.

Die wichtigsten davon sind die folgenden zwei Probleme:

Umschalten der Browser-Navigationsleiste

Beim Schieben zum Umschalten auf iOS werden zwei Seitenübergangsanimationen angezeigt. Beim Verschieben wird ein Wechsel ausgeführt, der dann die von uns festgelegte Übergangsanimation auslöst.

Mit Ausnahme der beiden oben genannten Fragen können die restlichen Vorgänge innerhalb der Seite eingestellt werden und sind grundsätzlich steuerbar. Hauptsächlich um die beiden oben genannten Probleme zu lösen.

Sie können den tatsächlichen schriftlichen Effekt sehen: Online-DEMO

1. Umschalten der Browser-Navigationsleiste

Vergleichen und beurteilen Sie, indem Sie den Verlauf vorwärts oder rückwärts aufzeichnen

Das folgende Beispiel

A-Seite-> B-Seite-> C-Seite

Wenn ich von Seite A zu Seite B gehe und dann Wenn Sie zur C-Seite gehen, werden 3 historische Datensätze generiert

Wir verwenden ein Array zur Darstellung: ['/a', '/b', '/c']

Dann klicke ich auf die Schaltfläche „Zurück“ in der Navigationsleiste des Browsers, um zu Seite B zurückzukehren.

Zu diesem Zeitpunkt muss ich nur feststellen, ob Seite B vorhanden ist. Dies beweist, dass ich geklickt habe die Zurück-Taste.

Sobald ich dann zurückgehe, kann ich auf die Weiterleitungsschaltfläche des Browsers klicken. Wie lässt sich zu diesem Zeitpunkt beurteilen, ob es vorangeht?

Wir können das schaffen.

Wenn wir zu Seite B zurückkehren, enthält der Verlauf nicht immer noch die drei Pfade ['/a', '/b', '/c']

Wir können löschen Seite B Der folgende Pfad ist jetzt ['/a', '/b'];
Wenn wir zu Seite A zurückkehren, ist der Pfad, den wir speichern, ['/a']

So lange Wenn wir auf die Schaltfläche „Vorwärts“ klicken, suchen wir im gespeicherten Pfad danach. Wenn wir den Pfad nicht finden können, ist die Vorwärtsbeurteilung abgeschlossen.

Das Obige ist eine normale Situation.
Was aber, wenn wir einige Seiten wiederholt aufrufen?

Genau wie die folgende Situation

Seite A-> Seite C-> >Jetzt machen wir 5 Schritte und erreichen die zweite C-Seite. Dann treten wir einen Schritt zurück und erreichen die B-Seite.

Sollten wir den Pfad hinter der ersten B-Seite löschen? der Pfad hinter der zweiten B-Seite

Versuchen wir zunächst, den Pfad hinter der zweiten B-Seite zu löschen, dann sind die Pfade, die wir noch speichern,: ['/a', '/b', '/c ', '/B'].

1. Zu diesem Zeitpunkt verfahren wir nach der Logik der oben genannten normalen Situation.

Ich klicke auf „Vorwärts“ und suche dann im gespeicherten Pfad Wenn ich den Beweis finde, gehe ich zurück.

Das Ergebnis ist offensichtlich, wir haben die erste C-Seite gefunden, also gehen wir zurück, aber wenn ich darauf klicke, gehen wir tatsächlich vorwärts

2 Versuchen wir, die erste B zu löschen Der Pfad hinter der Seite, dann der gespeicherte Pfad, lautet: ['/a', '/b'],

Wenn ich dann auf die Schaltfläche „Zurück“ klicke, wird tatsächlich Seite C aufgerufen. Wir können Folgendes sehen Prozessbild

Wenn wir zu diesem Zeitpunkt hier auf die Schaltfläche „Zurück“ klicken, gehen wir zur C-Seite, aber das „/c“ im gespeicherten Pfad ist vorhanden wurde von mir gelöscht, also beurteile ich, was dabei herauskommt, ist vorwärts.

1. Wäre es besser, wenn wir doppelte Seitenpfade filtern würden? Tatsächlich ist es dasselbe.

Wenn wir 5 Seitenpfade haben und 2 Duplikate filtern, gibt es nur 3 Seitenpfade

Wenn ich es dann nicht finden kann, wenn ich zum vierten Pfad zurückkehre, werden die nächsten beiden Seiten als vorwärts gezählt.

Aus heutiger Sicht ist es also der beste Weg, jede Seite aufzuzeichnen, aber jede Seite anders zu machen

Dann können wir eine zufällige Zeichenfolge in die URL einfügen

String

Code-Implementierung:

// 当没有key的时候会进入两次 beforeEach,我们只需保存带key的就行
const updateNavigations = (to) => {
 if (to.query[pathKey]) {
  store.commit('UPDATE_NAVIGATIONS', {path: to.fullPath})
 }
}
router.beforeEach((to, from, next) => {
 let toIndex = store.state.navigations.findIndex(path => path === to.fullPath)
 if (toIndex >= 0) { // 存在该路径
  let len = store.state.navigations.length-1
  if (toIndex === len) { // 当前路径是最后一条，证明是同一个页面
   console.log('refresh') 
  } else { // 后退
   store.commit('UPDATE_ROUTER_DIRECTION', { routerDirection: 'back' }) // 后退标志
   store.commit('DELETE_NAVIGATION', { index: toIndex }) // 删除当前路径后面的路径
  }
 }else{ // 不存在该路径
  store.commit('UPDATE_ROUTER_DIRECTION', { routerDirection: 'forward' }) // 前进标志
  updateNavigations(to) // 保存该连接
 }
 const query = { ...to.query }
 // 存在就直接next， 防止死循环
 if (!query['APP_KEY']) { // 不存在添加key ，再次 next
  query['APP_KEY'] = Math.random().toString(16).substring(2)
  next({ path: to.path, query})
 }else{
  next()
 }
})

Mit dem obigen Code können wir der URL eine zufällige Zeichenfolge APP_KEY hinzufügen, sodass sie unterschiedlich ist, selbst wenn sich dieselbe Seite im Pfad befindet, den wir speichern. Die Logik kann normal ausgeführt werden

Das oben Gesagte löst grundsätzlich das Problem der Browser-Navigationsleiste

2. Gleitendes Umschalten auf IOS

Auf dem IOS Auf einer Webseite können Sie nach links und rechts wischen, um zu wechseln, auch wenn Sie keine Übergangsanimation erstellen.

Zu diesem Zeitpunkt wird ein Problem auftreten.

Still ABC-Seite

A -> B -> Schieben Sie fertig Er wird die B-Seite betreten, aber zu diesem Zeitpunkt wird immer noch unsere beforeEach-Hook-Funktion eingegeben, um unsere obige Logik auszuführen.

Dadurch wird unsere Übergangsanimation ausgelöst. Sie werden feststellen, dass zwei Schalter ausgeführt werden.

Also habe ich im Internet eine Methode gefunden, um die linke iOS-Folie zu reparieren und die Animation #2259 erneut auszuführen

Der Code sieht so aus

let touchEndTime = Date.now()
window.addEventListener('touchend', () => {
 touchEndTime = Date.now()
})
router.beforeEach((to, from, next) => {
 if ((Date.now() - touchEndTime) < 377) { // ios滑动切换
  store.commit('UPDATE_ROUTER_DIRECTION', { routerDirection: '' })
 }
})

Das Obige ist auch einfach Verstehen Sie, das heißt, wir nehmen den Moment wahr, in dem der Finger schließlich den Bildschirm verlässt, und vergleichen ihn dann in beforeEach.

Der Unterschied zwischen dem letzten Moment, in dem der Finger den Bildschirm verlässt, und unserem eigenen Übergang in beforeEach beträgt weniger als 337 , auch wenn es sich um einen iOS-Schiebeschalter handelt

Das wird das Schiebeschalterproblem von IOS lösen.

Aber wenn IOS zum Umschalten nach rechts rutscht, kann es den Moment, in dem der Finger den Bildschirm verlässt, nicht überwachen (ich weiß nicht, was der Geist ist), daher rutscht IOS zum Umschalten nach rechts und kann nicht wie oben beurteilt werden.

Auch hierfür habe ich keine Lösung gefunden. Das Problem, nach links zu wischen, um in IOS zurückzukehren, kann ich vorerst nur lösen.

Im Grunde sind die zwei problematischsten Punkte die beiden oben genannten Punkte. Der Rest kann durch Überwachung des

Ereignisses

eingestellt werden, was überhaupt nicht schwierig ist

Ich glaube Ihnen Nachdem Sie den Fall in diesem Artikel gelesen haben, beherrschen Sie die Methode. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Wie man mit js Ajax-Funktionen und deren Verwendung kapselt

Was sind die am häufigsten verwendeten mathematischen Methoden? Funktionen in JS?

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Vue Mobile Routing Switching. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!