【Vue/Uni-app】浏览器返回强制刷新页面及Vue生命周期

【【Vue/Uni-app】浏览器返回强制刷新页面及Vue生命周期】应用场景:跳转第三方页面进行操作并同步数据后,用户点击返回(前进/后退)至源系统页面时数据没刷新
原因剖析:
浏览器在返回**【history.go(-1)】期间会优先获取缓存中的数据
既vue-Router中对当前页面配置了Keep-alive**(页面缓存模式)
PS:uni-app中,默认在全局范围内开启并使用了Keep-alive
解决方案:
1.Vue/iView中

{ path: '/page1', name: 'Page1', component: Page1, meta: { keepAlive: true // 是否启用页面缓存(注释或者删掉这行代码) } }

2.uni-app中
//新增如下代码 activated(){ /** 执行页面数据刷新的方法 */ reload(); },

一些拓展:
  1. activated钩子函数:在keep-alive模式下(vue对象存活**【存在页面缓存】时,只要进入页面就会立即触发activated函数,用于多次访问页面时进行对页面数据进行初始化**等操作)
  2. created/onLoad钩子函数:同样的,created/onLoad钩子也可以用来初始化页面和数据使用,但仅在首次创建或重启时触发,在一个生命周期内,created/OnLoad仅会触发一次!
  3. Vue的生命周期
beforeCreate(){ console.log("创建前===>胚胎") }, created(){ console.log("创建完成===>出生") }, beforeMount(){ console.log("挂载前===>幼儿园") }, activated(){ console.log("激活===>课外班:知识升级") }, deactivated(){ console.log("停止===>逃课打架:自暴自弃(多用于离开页面,比如切换页签(?))") }, mounted(){ console.log("挂载结束===>小学:知识消化(多用于配合监听及跨页面数据加载使用)") }, beforeUpdate(){ console.log("更新前===>初中:知识迭带(多用于异步更新前对页面数据的处理)") }, updated(){ console.log("更新完成===>高中:知识巩固") }, beforeDestroy(){ console.log("销毁前===>大学:思维碰撞(多用于关闭页面时对页面数据的操作)") }, destroyed(){ console.log("销毁完成===>毕业:现实世界(销毁页面时的操作,比如数据缓存清空等)") }

    推荐阅读