本人近日做前端的后台管理系统项目,一个问题一直都没解决,就是页面中查看详情按钮第一次点击进去详情页可以被渲染,回退出来第二次进去钩子函数没有被执行,网上这类问题的解决方法并不多,一直以来都没解决,今天终于解决,特来记录下。

解决方法:

  activated 可以使用这个钩子函数

以下为具体分析:

html 部分
<template> <div class="app"> <keep-alive> <router-view></router-view>
</keep-alive> </div> </template>
 

js 部分
..... created: function () { console.log(1) }, mounted: function () {
console.log(2) }, activated: function () { console.log(3) }, deactivated:
function () { console.log(4) } .....
 什么阶段获取数据

  页面生命周期钩子如上面的代码所示,这四个是最常用到的部分。这部分需要注意下,当引入keep-alive
 的时候,页面第一次进入,钩子的触发顺序created-> mounted->
activated,退出时触发deactivated。当再次进入(前进或者后退)时,只触发activated。

我们知道 keep-alive
 之后页面模板第一次初始化解析变成HTML片段后,再次进入就不在重新解析而是读取内存中的数据,即,只有当数据变化时,才使用VirtualDOM进行diff更新。故,页面进入的数据获取应该在activated中也放一份。数据下载完毕手动操作DOM的部分也应该在activated中执行才会生效。

所以,应该activated中留一份数据获取的代码,或者不要created部分,直接将created中的代码转移到activated中。

友情链接
ioDraw流程图
API参考文档
OK工具箱
云服务器优惠
阿里云优惠券
腾讯云优惠券
华为云优惠券
站点信息
问题反馈
邮箱:ixiaoyang8@qq.com
QQ群:637538335
关注微信