Résoudre le problème des données de la page de modification de routage Vue qui ne sont pas actualisées

Ci-dessous, je partagerai avec vous un article qui résout le problème des données de la page de modification de routage Vue qui ne sont pas actualisées. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde.

Enregistrez un peu chaque jour et enregistrez les problèmes que j'ai rencontrés. J'espère que cela pourra aider davantage de personnes qui rencontrent les mêmes problèmes que moi.

Description du problème : en ajustant l'interface, la liste de questions de la page d'aide est affichée dynamiquement. La liste de questions comporte plusieurs niveaux. Lorsque la question cliquée n'a pas de questions de niveau suivant, elle passe à la page de contenu. .

Le problème est que lorsque je travaillais sur la page mobile de mon ordinateur, je sautais l'un après l'autre vers la page de détails, je voulais revenir en arrière et j'ai cliqué sur le bouton

pour accéder directement. à la première image ci-dessus. On dirait que non, non, non, ce n'est pas le résultat que je souhaite. À ce moment-là, j'ai pensé à changer la hiérarchie de la page en changeant l'URL.

Le parent du premier niveau est 0, qui n'est pas affiché ou affiché par défaut.

Le parent du deuxième niveau est 1. En cliquant sur l'itinéraire du premier niveau, vous obtenez la figure suivante :

Lorsque vous cliquez pour accéder à la page du niveau suivant, les données seront actualisées, mais lorsque vous cliquez sur l'ordinateur pour revenir en arrière, la dernière url du parent est passée à 1, et la page affiche toujours les données de 2.

La solution est la suivante :

created () {
 console.log(this.getStatus(this.$route.path))
},
 watch: {
 '$route' (to, from) {
  console.log(this.getStatus(this.$route.path))
 }
 },
 methods: {
 getStatus (urlStr) {
  var urlStrArr = urlStr.split('/')
  return urlStrArr[urlStrArr.length - 1]
 }
},

Ce qui précède est ce que j'ai compilé pour tout le monde. Oui, j'espère que cela sera utile à tout le monde à l'avenir.

Articles associés :

Comment introduire l'icône dans le projet Vue

Vérification du format d'adresse e-mail en JavaScript

Introduction aux fonctions de partage de temps pour l'optimisation des performances javascript

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!