keep-alive的使用案例及知识点普及

需求描述：

用户从列表页跳转到详情页，再从详情页返回到列表页，要求：不调用任何接口，查询条件，分页器，列表数据保持跳转之前的状态

实现此效果的一种方法：

在跳转时，将当前页面的信息存储在sessionStorage中，从详情页返回列表页，从sessionStorage中取出存储的信息，并清除掉sessionStorage中存储的页面信息即可
缺点：如果查询条件，页面数据很多，那存储起来就不是很方便了

实现此效果的另一种办法：keep-alive

1.给需要缓存的A页面，name=“自己定义名字”
2.在router/index.js文件中,A页面路由配置的meta中增加keepAlive:true,isBack:false
3.在A页面的activated生命周期中，做出如下判断：

activated() {
    console.log("activated")
    console.log(this.$route.meta.isBack,"this.$route.meta.isBack")
    if(this.$route.meta.isBack === false){
      // 如果isBack是false，表明需要获取新数据，否则就不再请求，直接使用缓存的数据
      //以下内容是为了初始化搜索条件，以免影响从非详情页到此页面数据的获取
      this.pagination.currentPage = 1
      this.pagination.pageSize = 10
      this.searchform = {
        rows: "10",
        page: "1",
        sTime:"",
        eTime:"",
        ani:"",
      }
      this.fetchData();
    }
    // 恢复成默认的false，避免isBack一直是true，导致下次无法获取数据
    this.$route.meta.isBack=false
  },
注意：如果分页使用的是组件，分页的参数值不要和其他页面共用，也不要使用watch来监听分页大小和页码的变化，因为使用了keep-alive缓存了当前页面，页面没销毁，还是会监听，进行操作

4.在详情页注入如下操作：

beforeRouteLeave(to,from,next){
 console.log(to.meta,"meta")
  to.meta.isBack = true
  next()
},
注意：如果在此页面采用this.$router.push的方式跳转到列表页，不要携带参数，因为参数不同，会导致列表页缓存多个，造成回到列表页后，缓存信息出错

5.页面根目录的router-view的地方

<keep-alive :include="cachedViews">
  <router-view :key="key" />
</keep-alive>
注意：cachedViews为数组，包含A页面的name

keep-alive知识点普及

• props:
  include:(string或array),包含的组件会被缓存
  exclude:(string或array),包含的组件不会被缓存
  max:最多可以缓存多少个组件实例，一旦达到最大值，在新实例被创建之前，已缓存组件中最久没有被访问过的实例将会被销毁掉

• 使用方法：
  包裹动态组件，会缓存不活动的组件，而不被销毁
  它是一个抽象组件，自身不会渲染成DOM元素，也不会出现在组件的父组件链中
  被包裹的组件，他会多两个生命周期钩子函数activated和deactivated
  执行顺序：页面第一次进入，钩子函数的触发顺序created-> mounted-> activated，退出时触发deactivated。当再次进入（前进或者后退）时，只触发activated。
  被包裹的组件不会触发beforeDestory和destroyed这两个钩子函数

  详情请查看官方文档：keep-alive