图片 9

alive请求数据的点子言传身教,0页前边进刷新回退不刷新的兑现

By admin in web前端 on 2019年5月6日

至此,终于圆满兑现了成效,其实还有可优化的地方,插足须要keepalive的页面大多的话,每3个页面都写相同的beforeRouteLeave和activated就不曾须求了,

//在APP.vue里面写上keepalive,能够兑现缓存(keep-alive是怎么样?查看官方文书档案)

router.js

//在应用程式.vue里面写上keepalive,能够兑现缓存(keep-alive是怎么?查看官方文书档案)

第四步:

你也许感兴趣的篇章:

  • vue项目优化之通过keep-alive数据缓存的办法
  • vue使用keep-alive达成数据缓存不刷新

图片 1

上述正是本文的整体内容,希望对我们的学习抱有扶助,也期待大家多多帮助脚本之家。

解决办法

//在应用软件.vue里面写,当页面路由发生变化时,将相应页面包车型地铁滚动地点记录下来,在页面updated时读取并赋值

图片 2

钩子函数的进行各种

花了方方面面七日时间,尝试过很三种方法,终于找到了最棒的化解方案(对笔者来讲最好),为了祭拜逝去的10十十三日,也为了释放激动的心理,未来只可以写篇博客了。

花了整套一周时间,尝试过很三种主意,终于找到了超级的化解方案(对本人来讲最棒),为了祭祀逝去的二十三日,也为了释放激动的心思,今后只可以写篇博客了。

index页面:首页品牌进口

第四步:

//因为作者的主见是从首页(index.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;
   },

接下来在列表页的activated生命周期钩子中判别isBack,为false则推行加载函数,为true则使用缓存。

//在router的index.js里面给急需缓存的页面加上meta参数

list页面:商品列表页面

 

图片 3

从index页面进入list的时候要刷新页面,从product页面重回list的时候无需刷新页面,所以list使用了keep-alive的性情,keepAlive设置为true,不过付出进程中窥见2个难点,从product重回到list的时候,列表页面不是不利的品牌列表,而是从前2遍点击的品牌列表。由于各种人蒙受关于keep-alive请求数据不科学的主题材料分化,这里就直接说本人的消除办法。希望能给大家三个思路。

//list.vue中

下一场在列表页的activated生命周期钩子中判别isBack,为false则实践加载函数,为true则使用缓存。

beforeRouteEnter –> created –> mounted –> destroyed

 

图片 4

product页面:商品详细情况页面

 

第三步:

不使用keep-alive

//在router的index.js里面给急需缓存的页面加上meta参数

您恐怕感兴趣的篇章:

  • vue完结发展刷新后退不刷新作用

list.vue 

图片 5

//list.vue中

洋塞尔维亚人都会经过更换keepAlive来改换keep-alive,作者尝试后依旧要命,就换了个思路

图片 6

//在APP.vue里面写,当页面路由爆发变化时,将相应页面包车型大巴轮转地点记录下来,在页面updated时读取并赋值

先扫除文盲,多少人和自家都不知晓地点的文化,在keep-alive的页面中,能够在
activated获取this.$route.params的参数

由此从首页进入列表页时,将列表页的isBack设置为false,

直白上第二:

背景

 

图片 7

beforeRouteEnter –> created –> mounted –> activated –>
deactivated

直接上注重:

唯独实际怎么优化,等要求利用了再说吧。

不精通有咩有帮大家清理思绪,有有失常态态得以留言,以上正是本文的全体内容,希望对大家的读书抱有协理,也盼望大家多多帮忙脚本之家。

第二步:

第一步:

使用keep-alive

图片 8

//index.vue中:

逃脱了安装keepAlive导致product重临的时候数据错乱,当页面进入list的时候都以缓存状态,然后再通过是否由index进入来剖断是还是不是实践activated里的函数,

//因为本身的主张是从首页(index.vue)进入列表页时刷新数据,从列表页点击进入详细情形页,再回到列表页时不刷新,

至此,终于圆满兑现了意义,其实还有可优化的地点,参加供给keepalive的页面多数的话,各样页面都写一样的beforeRouteLeave和activated就从未有过须要了,

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);

图片 9

第二步:

只是现实怎么优化,等急需选取了再说吧。

为此从首页进入列表页时,将列表页的isBack设置为false,

//index.vue中:

图片 10

 

第三步:

第一步:

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 澳门新葡亰官网app 版权所有