vue 页面缓存问题

1.路由设置

routes：[
  {
     path: 'index',
     component: notice,
     meta: {
       keepAlive: true  // 是否缓存标志
     }
   }
]

主要设置元信息（keepAlive）代表页面需要缓存

2.页面路由嵌套设置

<keep-alive>
  // 将需要缓存得页面写在keep-alive里面
  <view-router v-if="$route.meta.keepAlive"></view-router>
</keep-alive>
// 不需要缓存得页面写在外面
<view-router v-if="!$route.meta.keepAlive"></view-router>

页面路由跳转时将需要缓存的页面血再keep-alive标签之中，不需要缓存得页面直接显示

注： 缓存页面会使页面增加两个生命周期 activated，deactivated

3.从指定页面返回使用缓存数据，其他页面进入则从新加载数据

在需要缓存的页面加入如下代码

// 在进入页面时先判断是否是从详情页面返回
beforeRouterEnter (to, from, next) {
  if(to.path === '/detail') {
    this.$route.meta.isBack = true
  }
  next()
},
activated () {
  // 如果不是从详情页面返回，则重新加载数据
  if (!this.$route.meta.isBack) {
    //加载页面数据
  }
  // 从新设置页面得路由元信息
  this.$route.meta.isBack = false
}

进入页面先判断是否从详情返回，从详情返回在页面路由元信息中加入标志，在页面加载过程中判断是否从详情返回，是则不加载数据，否则从新加载页面数据， 最后需要再次设置页面路由元信息，防止下回默认isBack: true,其他页面进来不加载数据