Résoudre le problème de plusieurs routes Vue partageant une seule page

Ci-dessous, je partagerai avec vous un article qui résout le problème des plusieurs itinéraires Vue partageant une même page. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde.

Dans le développement quotidien de Vue, nous pouvons rencontrer le besoin de plusieurs itinéraires pour partager une page, en particulier lorsque les itinéraires sont ajoutés dynamiquement. Différents itinéraires n'affichent que des données différentes et rien d'autre ne change. Par exemple :

let routes = [
  {path:"/zhanshan",
  components:Person,
  },
  {path:"/lisi",
  components:Person,
  },
  {path:"/wangwu",
  components:Person,
  }
]

Dans ce cas, nous avons constaté que notre page ne se chargerait plus après un premier chargement réussi. Par conséquent, la page affiche toujours les données chargées pour la première fois, ce qui donne l'impression que le routage n'a pas pris effet. Cependant, en observant les changements dans la barre d'adresse du navigateur, nous pouvons confirmer que cela n'a rien à voir avec le routage. . Ceci est très utile pour les étudiants qui viennent de commencer à utiliser Vue. Cela peut causer quelques problèmes. En fait, cela est lié au cycle de déclaration de la page. La raison de cette situation est que la plupart de ses fonctions de hook (montées, calculé...) ne redémarrera pas une fois la page chargée, donc en conséquence, la page donne l'impression qu'il n'y a pas de saut.

Ce type d'exigence commerciale est en fait plus facile à gérer. En fait, nous n'avons pas besoin de changer de page. Nous avons seulement besoin que les données de la page changent. la page. Lorsque l'adresse Lorsqu'elle change, nous rechargeons les données.

watch:{
 "$route":function(to,from){
   //from 对象中包含当前地址
   //to 对象中包含目标地址
   //其实还有一个next参数的，这个参数是控制路由是否跳转的，如果没写，可以不用写next()来代表允许路由跳转，如果写了就必须写next(),否则路由是不会生效的。
 }
}

La fonction ci-dessus sera déclenchée à chaque fois que l'itinéraire change. Nous pouvons recharger les données de la page dans cette fonction. Si la structure de la page change de manière significative, il est recommandé de créer une nouvelle page distincte.

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles connexes :

Comment utiliser les expressions EL pour obtenir les valeurs des paramètres de contexte dans JS

JS déplace la liste de gauche vers la bonne fonction List

Utilisation de l'expression el en js et méthode de jugement non vide

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!