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+次）进入不会再执行此钩子函数
}