Comment utiliser vue keep-alive pour demander des données

Cette fois, je vais vous montrer comment utiliser vue keep-alive pour demander des données, et quelles sont les précautions à prendre pour utiliser vue keep-alive pour demander des données. Ce qui suit est un cas pratique, jetons un coup d'œil.

page d'index : page d'accueil entrée de la marque

page de liste : page de liste de produits

page de produit : page de détails du produit

Lors de la saisie de la liste à partir de l'index page Actualisez la page. Il n'est pas nécessaire d'actualiser la page lors du renvoi de la liste à partir de la page du produit, la liste utilise donc l'attribut keep-alive et keepAlive est défini sur true. Cependant, un problème a été découvert lors du processus de développement. en revenant de la page produit à la liste, la page liste n'est pas correcte, mais la liste des marques d'un clic précédent. Étant donné que tout le monde rencontre des problèmes différents concernant les données incorrectes des demandes de maintien en vie, voici ma solution. J'espère que cela pourra vous donner une idée.

Solution

Beaucoup de gens changeront keep-alive en modifiant keepAlive. Après l'avoir essayé, cela n'a toujours pas fonctionné, alors j'ai essayé. j'ai changé d'avis

Ordre d'exécution des fonctions de hook

Ne pas utiliser keep-alive

beforeRouteEnter --> créé --> ; monté --> ; détruit

Utiliser keep-alive

avantRouteEnter --> monté -->

Tout d'abord, apprenez l'alphabétisation. Beaucoup de gens et moi ne connaissons pas les connaissances ci-dessus. Dans la page keep-alive, vous pouvez obtenir les paramètres de this.$route.params activés

Évitez de définir keepAlive. Lorsque le produit revient, les données sont incorrectes. Lorsque la page entre dans la liste, elle est ensuite jugée si la fonction doit être activée en fonction de sa saisie à partir de l'index. .

list.vue

   beforeRouteEnter(to, from, next) {
   //判断从index页面进入，将list的isBack设置为true
   //这样就可以请求数据了
     if (from.name == 'index') {
      to.meta.isBack = true;
     }
     next();
   },
   activated: function () {
     if (this.$route.meta.isBack || this.isFirstEnter) {
      //清理已有商品列表的数据，重新请求数据，如果不清除的话就会有之前的商品缓存，延迟显示最新的商品
      this.proData = [];
      //请求数据
      this.fetchData();
     }
     //重新设置当前路由的isBack
     this.$route.meta.isBack = false;
     //重新设置是否第一次进入
     this.isFirstEnter = false;
   },
   mounted: function () {
    //如果是第一次进入，或者刷新操作的话，也请求数据
     this.isFirstEnter = true;
   },

router.js

const appRouter = {
 mode: "history",
 base: "/m/",
 routes: [
  {
   path: "",
   redirect: "/index"
  },
  {
   path: "/index",
   name: "index",
   component: Index,
   meta: {
    keepAlive: true
   }
  },
    {
   path: "/list",
   name: "list",
   component: List,
   meta: {
    keepAlive: true,
    isBack: false //isback是true的时候请求数据，或者第一次进入的时候请求数据
   }
  },
  {
   path: "/product/:id",
   name: "product",
   component: Product,
   meta: {
    keepAlive: false
   }
  }
  
 ]
};

Vue.use(Router);
export default new Router(appRouter);

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes. , veuillez faire attention aux autres articles connexes sur le site Web PHP chinois !

Lecture recommandée :

Comment utiliser vue input pour saisir une combinaison de lettre et de chiffre de vérification et la longueur est inférieure à 30

Comment utiliser Seajs Écrivez l'accord dans require

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!