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

vue中提供了一个内置组件keep-alive来缓存组件，避免多次加载相应组件，避免重复渲染。在项目中要实现在某一指定页面返回后不刷新的情况，请看下面具体实现：

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

{
    path: 'page1',
    name: 'page1',
    meta: {
      keepAlive: true, //此组件需要被缓存
      isBack:false, //用于判断上一个页面是哪个
    }
},
{
    path: 'page2',
    name: 'page2'
}

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

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

<router-view v-if="!$route.meta.keepAlive">
  <!-- 这里是不被缓存的视图组件 -->
</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.init();
    }
    // 恢复成默认的false，避免isBack一直是true，导致下次无法获取数据
    this.$route.meta.isBack=false
    // 恢复成默认的false，避免isBack一直是true，导致每次都获取新数据
    this.isFirstEnter=false;
},
created(){
    this.isFirstEnter = true;
    // 只有第一次进入或者刷新页面后才会执行此钩子函数，使用keep-alive后（2+次）进入不会再执行此钩子函数
}