vue-admin 是后台管理系统模板

vue-admin 页面缓存与数据加载问题(keep-alive与activated生命周期函数)

页面缓存为何物?

vue-admin 页面缓存与数据加载问题(keep-alive与activated生命周期函数)
vue-admin 页面缓存与数据加载问题(keep-alive与activated生命周期函数)

keep-alive在哪里?

vue-admin 页面缓存与数据加载问题(keep-alive与activated生命周期函数)
在vue-admin文档结构中,src目录下的layout目录下,有个Index.vue文件,在此文件中,appMain是作为页面的主体部分展示的,打开对应的组件可以看到:

vue-admin 页面缓存与数据加载问题(keep-alive与activated生命周期函数)
key(){return this.$route.path} 是将所有的路径都缓存了。

缓存是我们想要的,但是页面还是要刷新。

页面刷新

vue-admin 页面缓存与数据加载问题(keep-alive与activated生命周期函数)
vue-admin 页面缓存与数据加载问题(keep-alive与activated生命周期函数)
从上面图片可知,通过keep-alive缓存的页面,可以通过activated生命周期函数进行页面的监听。也就是说,通过keep-alive缓存的页面,大部分的生命周期函数是不走的。比如:created,mounted等。唯一能够走的生命周期函数就是:activated与deactivated。

所以可以将表单数据的加载函数放在activated生命周期函数中。

问题解决。

vue-admin 页面缓存与数据加载问题(keep-alive与activated生命周期函数)

相关文章: