keep-alive 跳转页面后数据缓存不刷新

需求如下：
列表页筛选数据后跳到详情页，再返回列表页后页面不能刷新，需保留之前筛选的数据

1. router.js中添加meta属性，keepAlive标记是否开启缓存，isBack标记是否从详情页跳转返回

{
  path: '/map',
  name: 'map',
  component: () => import('@/views/map/index'),
  hidden: true,
  meta: {
    keepAlive: true,
    isBack: false
  }
}

2. App.vue中判断是否需要缓存

<keep-alive>
  <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>

3. 组件中通过beforeRouteEnter进行路由守卫

beforeRouteEnter(to, from, next) {
  if (from.path === '/detail') {
    to.meta.isBack = true
  } else {
    to.meta.isBack = false
  }
  next()
},
activated() {
  if (!this.$route.meta.isBack) {
    this.getData()
  }
  this.$route.meta.isBack = false
}

附上参考链接