Utiliser le routage dans vue pour actualiser la page

Cet article présente principalement comment Vue implémente l'actualisation des pages via le routage. Maintenant, je le partage avec vous et le donne comme référence.

vue développe un projet de centre commercial WeChat

Les exigences sont les suivantes :

La page du panier passe à la page de détails. La page du panier contient plusieurs composants. passer à la caisse Sur la page de commande, lors du retour de la commande, la page du panier n'est pas actualisée. Étant donné que les événements sont transmis entre les composants du panier via le bus, les sauts de page (retours non physiques) ne peuvent pas déclencher la méthode beforeDestroy, et la méthode bus ne peut pas être détruite dans cette méthode

 beforeDestroy() {
  this.$root.Bus.$off('judge')
  this.$root.Bus.$off('refreshDetail')
  this.$root.Bus.$off('clearAll')
  this.$root.Bus.$off('upDataCart')
 },

Frustration, détruisez-la via beforeRouteLeave

 beforeRouteLeave(to, from, next) {
  this.$root.Bus.$off('judge')
  this.$root.Bus.$off('refreshDetail')
  this.$root.Bus.$off('clearAll')
  this.$root.Bus.$off('upDataCart')

  next()
 },

De même, la méthode de création du panier ne peut pas être déclenchée lorsque le retour physique est fait, et la méthode $on du bus ne peut pas être déclenchée

En dernière analyse, actualiser la page au retour de la physique peut résoudre ce problème

Idée 1

  beforeRouteEnter(to, from, next) {
   next(()=>{
     window.location.reload()
   })
  },

Cette méthode semble réalisable en théorie, mais la page continuera à se rafraîchir,

Finalement, j'ai adopté l'idée 2, qui semble être une méthode très basse, mais cela résout le problème réel

 this.$router.replace({ name: 'cart' })// 处理返回刷新问题
   this.$router.push({
    path: '/order/order_sure',
    query: {
     sku: sku_str,
     cart: 'cart'
    }
   })

Avant que la page ne saute, remplacez-la par la page actuelle via le routage. Accédez à nouveau à la page de commande et vous pourrez actualiser automatiquement à votre retour. Cette méthode n'est pas idéale. Si vous avez une meilleure méthode, partagez-la

Il existe une méthode spéciale pour résoudre ce problème. Sur la page du panier, ajoutez ce qui suit. Le code est juste

 // 销毁组件，返回刷新
 deactivated() {
  this.$destroy()
 },

Le. ci-dessus est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.

Articles associés :

Fermetures PHP et fonctions anonymes (tutoriel détaillé)

À propos des événements personnalisés dans les composants Vue (tutoriel détaillé)

Comment utiliser le sélecteur de liens à trois niveaux dans le mini-programme WeChat

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!