vue中使用keep-alive实现页面返回不刷新问题

vue中提供了一个内置组件keep-alive来缓存组件，避免多次加载相应组件，避免重复渲染。之前经手的项目要实现在某个特定页面中实现前进刷新，后退不刷新功能，下面看代码：

1.在router文件夹下index.js文件中添加路由信息，并设置需要缓存的页面(这里需要注意的是在需要缓存的所有路由下都必须添加keepAlive，如果没有使用keep-alive缓存组件，就可以不写这个属性)

{
    path: 'page1',
    name: 'page1',
    component: page1 => require(['文件名'], page1),
    meta: {
      keepAlive: true, //此组件需要被缓存
      isBack:false, //用于判断上一个页面是哪个
    },
},

2.在入口文件app.vue中配置

<keep-alive>
  <router-view v-if="$route.meta.keepAlive">
    <!-- 这里是会被缓存的视图组件，比如 page1,page2 -->
  </router-view>
</keep-alive>

<router-view v-if="!$route.meta.keepAlive">
  <!-- 这里是不被缓存的视图组件，比如 page3 -->
</router-view>

3.在需要被缓存的页面中(这里的页面必须是被keep-alive包含的)设置钩子函数

beforeRouteEnter(to, from, next) {
    if(from.name=='page2'){
      to.meta.isBack=true;
      //判断是从哪个路由过来的，
      //如果是page2过来的，表明当前页面不需要刷新获取新数据，直接用之前缓存的数据即可
    }
    next();
},
activated() {
    if(!this.$route.meta.isBack || this.isFirstEnter){
      // 如果isBack是false，表明需要获取新数据，否则就不再请求，直接使用缓存的数据
      // 如果isFirstEnter是true，表明是第一次进入此页面或用户刷新了页面，需获取新数据
      // this.allTaskList= [];// 把数据清空，可以稍微避免让用户看到之前缓存的数据
      this.getData();
    }
    // 恢复成默认的false，避免isBack一直是true，导致下次无法获取数据
    this.$route.meta.isBack=false
    // 恢复成默认的false，避免isBack一直是true，导致每次都获取新数据
    this.isFirstEnter=false;

},
created(){
    this.isFirstEnter = true;
    // 只有第一次进入或者刷新页面后才会执行此钩子函数，使用keep-alive后（2+次）进入不会再执行此钩子函数
}

4.有的人完成之后会出现第一次点击的时候不缓存数据第二次才可以，这个原因可能是在路由信息中添加keep-alive不全，一定是要在所有需要缓存的路由中都添加keep-alive。