vue keep-alive与钩子方法activated的使用方法

原创 创建时间:2019-12-06 访问量:126 赞:0 踩:0

这里简要说明一下这个keep-alive的用处:

在vue的开发中,有时第一页要显示分页table,点击table中的行进入下一页显示与该行相关的详细信息,但在返回到列表页时,列表页面就会重新加载,列表数据双重新回到第一页。

为了解决这个问题,我们在router-view标签之外包裹一层keep-alive,这样就使之前路由的页面状态得到保持,在返回时依然显示的是之前的列表页面并在刚刚翻到的那一页面。

但这样又带来了一个新的问题,那就是每次单击表格的一行进入了详情页面时的数据就不会根据前面的表格行来改变,原因是详情页面中的状态没有改来,created和mounted钩子方法并没有执行,因为状态没有变,所以watch监示的属性也不变,也不会动态执行。

这样就用到了activited这个方法,每次路由到此页面时都会执行此方法,因此只要在此方法中加入刷新的函数变更数据,就可以实现显示针对不同表格行的数据详情了。


<keep-alive>
  <router-view></router-view>
</keep-alive>


activated: function() {
  this.init();
},
评论
 我想说:
==已经到底了==
关注: 粉丝: 积分:
工联信息网
如有问题请致邮箱:need@glxxw2018.com(仅限本站无法查询到的资料);本站能够查询到的资料请关注“工联信息网”公众号,通过页面提供的资源码查询!
不良信息反馈及侵权投诉建议请致邮箱:accusation@glxxw2018.com