关于 keep-alive Vue-动态组件使用

keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件中。

用keep-alive包裹的路由页面路由地址不改变时，组件实例不会被销毁

使用场景：

例如有一个商品页面和一个详情页面，这样在两个页面切换的时候就可以用到keep-alive包裹,再切换到详情的时候，把商品页状态位置保留在内存中，没有销毁,（自身不会生成dom元素）等从详情返回的时候，页面还是之前的状态，更一步优化了性能，

优点：

优点是在组件切换过程中，把切换出去的组件保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性，

缓存的方式有几种：

一、如果需要缓存整个项目，直接在app.vue中用keep-alive包裹router-view即可。

二、需要缓存部分页面 （2种方法）

方法1、

    如果缓存部分页面，第一种是使用使用新增属性include/exclude,缓存部分页面，首先在data中定义，isKeep：[‘组件1’，‘组件2’]，在keepAlive上用：:include="iskeep"，注意一定要在路由和被缓存的组件加上name否则缓存会失效，如果缓存页面较少，可以直接 include="UserDetail,BoxDataManagement"
———————————————— 

后台管理项目中 使用：layout/components/AppMain.vue <keep-alive :include="">

不会触发created和mounted

会触发activated和deactivated

activated：keep-alive组件激活时调用

deactivated：keep-alive组件停用时调用

例如

AppMain.vue页面

<template>

  <section class="app-main">

    <transition name="fade-transform" mode="out-in">

      <keep-alive include="UserDetail,BoxDataManagement"> // 页面缓存 [XSea 2022.4.21]

        <router-view :key="key" />

      </keep-alive>

    </transition>

  </section>

</template>

<script>

export default {

  name: 'AppMain',

  computed: {

    key() {

      return this.$route.path

    }

  }

}

</script>

// 离开页面设置缓存

  beforeRouteLeave(to, from, next) {

    // 去哪些页面缓存本页

    if (to.name == 'BoxProductDetails') {

      // 开启缓存

      from.meta.keepAlive = true

      console.log('from true:' + from.name)

      console.log('beforeRouteLeave keepAlive:' + from.meta.keepAlive)

    } else {

      // 关闭缓存

      from.meta.keepAlive = false

      console.log('from false:' + from.name)

      console.log('beforeRouteLeave keepAlive:' + from.meta.keepAlive)

    }

    next()

  },

  activated() {

    console.log('activated enter keepAlive:' + this.$route.meta.keepAlive)

    if (!this.$route.meta.keepAlive) {

      // 重置页面

      this.tableData = []

      this.options = []

      this.restaurants = []

      this.form.startTime = ''

      this.form.endTime = ''

      this.form.boxName = ''

      this.form.boxId = ''

      this.init()

      // 重置页面位置

      window.scrollTo(0, 1)

    } else {

      if (this.scrollTop > 0) {

        window.scrollTo(0, this.scrollTop)

        this.scrollTop = 0

      }

    }

    window.addEventListener('scroll', this.handleScroll)

    // 通过这个控制刷新

    this.$route.meta.keepAlive = false

    console.log('activated leave keepAlive:' + this.$route.meta.keepAlive)

  },

  deactivated() {

    window.removeEventListener('scroll', this.handleScroll)

  },

在商品页面添加路由钩子，做逻辑判断等 

 关于子路由的页面缓存，可以添加  activeMenu

原本选中是根据is-active来判断的，但是进图子路由都没有这个选中了，这时候只需要在再路由的meta中添加activeMenu

如  子路由是/DataManagement/BoxDataManagement/BoxProductDetails

      就可以用   activeMenu: '/DataManagement/BoxDataManagement'

 // 盲盒统计管理

      {

        path: 'BoxDataManagement',

        name: 'BoxDataManagement',

        component: () => import('@/views/DataManagement/BoxDataManagement/BoxDataManagement'),

        meta: {

          title: '盲盒数据统计',

          icon: 'el-icon-document',

          permissions: ['menu_data_box_report']

        }

      },

      // 盲盒商品详情

      {

        path: 'BoxProductDetails',

        name: 'BoxProductDetails',

        hidden: true,

        component: () => import('@/views/DataManagement/BoxDataManagement/BoxProductDetails/BoxProductDetails'),

        meta: {

          title: '商品详情',

          icon: 'el-icon-document',

          activeMenu: '/DataManagement/BoxDataManagement'

        }

      },

 

如新加一个 页面（商品页面+商品详情页）

左侧页面为商品页，右侧为路由页面 

 

 即可实现页面缓存，从详情返回的时候，商品详情页还是在跳详情之前的状态

方法2、 

 第二种是结合Router，router/index.js中通过设置路由元信息，指定属性缓存属性值为true，不缓存属性值为fasle，在app.vue中用keepAlive包裹要缓存的router-view，通过$router.meta.设置的路由原信息属性值获取，在keepAlive外在用v-if取反判断，v-if和v-else不是配套使用，为什么不使用v-else，因为v-if和v-else之间要挨着使用不然会报错

<keep-alive>

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

 </keep-alive>

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

 </router-view>

 在router.js中，对需要缓存 的页面设置

meta: {

                keepAlive: true

            }