vue keep-alive

<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 <transition> 相似，<keep-alive>是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。 当组件在 <keep-alive> 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。

项目中需要从列表页面进入详情页面返回时，保留在列表页面的操作，因为列表页面有多种搜索项和一些表格的操作，切换的时候，你有时会想保持这些组件的状态，以避免反复重渲染导致的性能问题。如果每次进到列表页面时重新进行操作，用户体验也非常不好

对于需要缓存的页面，设置对应的name值

export default {
  name: 'QueryList_keepAlive'
}

// include 和 exclude 属性允许组件有条件地缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示：
<keep-alive include="QueryList_keepAlive">
    <router-view></router-view>
</keep-alive>
<keep-alive include="QueryList_keepAlive,QueryListDetails_keepAlive">
    <router-view></router-view>
</keep-alive>
<keep-alive :include="/^[\w\W]*_keepAlive/">
    <router-view></router-view>
</keep-alive>
<keep-alive :include="['QueryList_keepAlive', 'QueryListDetails_keepAlive']">
    <router-view></router-view>
</keep-alive>

匹配首先检查组件自身的 name 选项，如果 name 选项不可用，则匹配它的局部注册名称 (父组件 components 选项的键值)。匿名组件不能被匹配。

有些情况下我们需要清空这个缓存，可以使用beforeRouterEnter,判断从哪个页面进来的，根据需要清空缓存的内容

beforeRouterEnter(to,from,next){
  // 从详情页面进入时不需要做处理，其他页面需要重新获取数据
  if (from.path === '/details') {
    next()
  } else {
    next(vm => {
      vm.loading = false
      ...
      vm.crea
    })
  }
}