Comment utiliser la commutation de routage mobile Vue

Cette fois, je vais vous montrer comment utiliser la commutation de routage mobile vue, et quelles sont les précautions lors de l'utilisation de la commutation de routage mobile vue. Voici des cas pratiques, jetons un coup d'œil.

Les plus importants d'entre eux sont les deux problèmes suivants :

Changement de la barre de navigation du navigateur

Lorsque vous faites glisser pour allumer IOS, il y aura deux animations de transition de page. Un basculement est effectué lorsqu'il glisse, puis déclenche l'animation de transition que nous avons définie.

À l'exception des deux questions ci-dessus, le reste des opérations peut être défini dans la page et est fondamentalement contrôlable. Principalement pour résoudre les deux problèmes ci-dessus.

Vous pouvez voir l'effet écrit réel : DÉMO en ligne

1. Changer la barre de navigation du navigateur

Comparez et jugez en enregistrant l'historique en avant ou en arrière.

L'exemple suivant

Une page-> Page B-> Page C

Si je passe de la page A à la page B puis Lorsque vous accédez à la page C, 3 enregistrements historiques seront générés

Nous utilisons un tableau pour le représenter : ['/a', '/b', '/c']

Ensuite, je clique À l'aide du bouton retour de la barre de navigation du navigateur, je reviendrai à la page B.

A ce moment, il me suffit de déterminer si la page B existe. Si elle existe, cela prouve que j'ai cliqué. le bouton retour.

Ensuite, une fois que je suis revenu en arrière, je peux cliquer sur le bouton Suivant du navigateur. Comment juger si cela avance à ce moment-là ?

Nous pouvons le faire.

Quand on revient à la page B, l'historique n'a-t-il pas encore les trois chemins ['/a', '/b', '/c']

On peut supprimer ? page B Le chemin suivant est maintenant ['/a', '/b'];

Si nous revenons à la page A, alors le chemin que nous enregistrons est ['/a']

Tant que en cliquant sur le bouton Suivant, recherchons dans le chemin enregistré. Si nous ne trouvons pas le chemin, le jugement avant sera terminé.

Ce qui précède est une situation normale.

Mais que se passe-t-il si nous entrons dans certaines pages à plusieurs reprises.

Tout comme la situation suivante

Page A-> Page B-> Page B-> >Maintenant, nous faisons 5 pas et atteignons la deuxième page C. Puis nous prenons du recul et atteignons la page B

A ce moment, la question se pose. Faut-il supprimer le chemin derrière la première page B ? le chemin derrière la deuxième page B

Essayons d'abord de supprimer le chemin derrière la deuxième page B, puis les chemins que nous enregistrons encore sont : ['/a', '/b', '/c ', '/b'].

1. À ce moment, nous fonctionnons selon la logique de la situation normale ci-dessus

Je clique sur avant, puis je vais sur le chemin enregistré pour rechercher. trouvez-le, j'avancerai. Si je trouve la preuve, j'y retournerai.

Le résultat est évident. On a trouvé la première page C, donc on revient en arrière, mais en fait quand je clique dessus, on avance

2. Le chemin derrière la page, alors le chemin enregistré est : ['/a', '/b'],

Ensuite, lorsque je clique sur le bouton de retour, il entrera en fait dans la page C. Nous pouvons voir ce qui suit image du processus

À ce moment, si nous cliquons sur le bouton de retour ici, nous irons à la page C, mais le `'/c'` dans le chemin enregistré a été supprimé par moi, donc je juge que ce qui sort est en avant.

1. Serait-il préférable de filtrer les chemins de pages en double ? En fait, c'est pareil

Si nous avons 5 chemins de pages et filtrons 2 doublons, il n'y a que 3 chemins de pages

Ensuite, si je ne le retrouve pas en revenant au quatrième chemin, alors les deux pages suivantes seront comptées comme en avant.

Donc du point de vue actuel, le meilleur moyen est d'enregistrer chaque page, mais de rendre chaque page différente

Ensuite, nous pouvons en mettre une au hasard sur l'url

String

Implémentation du code :

// 当没有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()
 }
})

Avec le code ci-dessus, nous pouvons ajouter une chaîne aléatoire de APP_KEY à l'URL, de sorte que même si la même page se trouve dans le chemin que nous enregistrons, elle sera différente. La logique peut être exécutée normalement

Ce qui précède résout essentiellement le problème de la barre de navigation du navigateur

2 Allumage coulissant sur IOS

Sur l'IOS. page Web, vous pouvez glisser vers la gauche et la droite pour basculer, même si vous ne faites pas d'animation de transition.

Un problème va surgir à ce moment.

Page ABC fixe

A -> B -> terminer le glissement Il entrera dans la page B, mais à ce moment-là, il entrera toujours dans notre fonction de hook beforeEach et exécutera notre logique ci-dessus.

Cela déclenchera notre animation de transition. Vous constaterez que deux commutations sont effectuées.

J'ai donc trouvé une méthode sur Internet pour corriger le glissement gauche d'iOS et exécuter à nouveau l'animation #2259

Le code est comme ça

Ce qui précède est également facile à comprendre, c'est-à-dire que nous obtenons le dernier moment où le doigt quitte l'écran, puis le comparons dans beforeEach

La différence entre le dernier moment où le doigt quitte l'écran et notre propre transition avantEach est inférieure à 337. , même s'il s'agit d'un commutateur coulissant iOS

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: '' })
 }
})

Cela résoudra le problème de commutation coulissante d'IOS.

Cependant, le moment où le doigt quitte l'écran ne peut pas être surveillé lors du glissement vers la droite pour basculer dans IOS (je ne sais pas ce qu'est le fantôme), donc le basculement coulissant vers la droite dans IOS ne peut pas être jugé comme ci-dessus .

Je n’ai pas non plus trouvé de solution à ce problème. Pour le moment, je ne peux résoudre que le problème du balayage vers la gauche pour revenir dans IOS.

En gros, les deux points les plus gênants sont les deux points ci-dessus. Le reste peut être réglé en surveillant l'

événement

, ce qui n'est pas difficile du tout

Je vous crois. J'ai maîtrisé la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment utiliser js pour encapsuler les fonctions et l'utilisation des fonctions ajax

Quelles sont les mathématiques couramment utilisées fonctions en JS ?

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!