keep-alive组件,是实现从B页面进A页面不刷新，其他页面进A页面都刷新

keep-alive组件,是实现从B页面进A页面不刷新，其他页面进A页面都刷新

首先，在A路由元信息meta中添加一个isBack字段，用来解决beforeRouterEnter不能直接访问vue实例。

...
{
    
    
    path: '/A',//A页面
    name: 'A',
    component: List1,
    meta: {
    
    
        keepAlive: true, //此组件需要被缓存
        isBack: false
    }
},
{
    
    
    path: '/B',//B页面
    name: 'B',
    component: List2,
    meta: {
    
    
        keepAlive: true //此组件需要被缓存
    }
}
...

借助beforeRouteEnter钩子函数来判断页面来源：

beforeRouteEnter(to, from, next) {
    
    
  if(from.name === 'A') {
    
    
  //判断是从哪个路由过来的，若是detail页面不需要刷新获取新数据，
  //直接用之前缓存的数据即可
      to.meta.isBack = true;
  }
  next();
},

需要借助keep-alive提供钩子函数activated来完成是否更新：

activated() {
    
    
  if(!this.$route.meta.isBack) {
    
    
    // 如果isBack是false，表明需要获取新数据，否则就不再请求，直接使用缓存的数据
    Object.assign(this.$data, this.$options.data())//重置页面data里面所有变量
    this.getData(); // ajax获取数据方法
  }
  // 恢复成默认的false，避免isBack一直是true，导致下次无法获取数据
  this.$route.meta.isBack = false
},