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

待我称王封你为后i 2021-11-05 20:56 1184阅读 0赞

**应用场景：跳转第三方页面进行操作并同步数据后，用户点击返回（前进/后退）至源系统页面时数据没刷新**  
**原因剖析：**  
浏览器在返回\*\*【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("销毁完成===>毕业：现实世界（销毁页面时的操作，比如数据缓存清空等）")
    }