Maison > Article > interface Web > 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']
Mais que se passe-t-il si nous entrons dans certaines pages à plusieurs reprises.
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 BA 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 : 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. 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 Cela résoudra le problème de commutation coulissante d'IOS. événement Comment utiliser js pour encapsuler les fonctions et l'utilisation des fonctions ajax// 当没有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()
}
})
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 #2259Le code est comme ça
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: '' })
}
})
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!