Solution pour savoir comment vue-router répond aux changements dans les paramètres de routage

Le contenu de cet article concerne la solution permettant à vue-router de répondre aux modifications des paramètres de routage. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

1. Pour rappel, lors de l'utilisation de paramètres de routage, tels que la navigation de /user/foo vers /user/bar, l'instance du composant d'origine sera réutilisée. Étant donné que les deux routes restituent le même composant, la réutilisation est plus efficace que la destruction et la recréation. Cependant, cela signifie également que le hook de cycle de vie du composant ne sera plus appelé.
Seuls les paramètres du parcours ont changé, et le parcours ne sera pas rafraîchi par défaut.
Pour résoudre ce problème
Si vous ne souhaitez pas le réutiliser, ajoutez une clé à la vue routeur du composant parent
< ;/router-view>

2. C'est le problème d'écran blanc de vue-router IOS. C'est vraiment ennuyeux
Description du problème :

Entrer page A——> ;Page B——>retour intégré ios——>Un écran blanc apparaît——>Cliquez manuellement sur l'écran blanc——>Solution du problème

Analyse des causes :

Lorsque vous utilisez WebView pour développer un projet Vue sur une machine iOS, go history(-1) ne peut pas abaisser la hauteur du corps, ce qui le recouvre. Ce n'est qu'en déclenchant un léger clic que le masque peut être retiré.

Principe de mise en œuvre de la solution :

html et body sont tous deux à 100 %, #app prend en charge la notification de l'élément parent, mais le défilement par défaut du navigateur n'est pas #app, mais body. Certains facteurs rendent impossible la restauration après le retour à l'historique (défaut iOS), pour cette raison, nous avons absolument positionné #app et en avons fait à nouveau l'objet de défilement, résolvant ainsi le problème

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。根据具体情况而定

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!