keepalive配合标签页进行注册和销毁

技术栈：vue，vue-router

是什么

keep-alive是vue中提供缓存不活动组件的标签，可以支持一些如返回页面，缓存当前分页信息、搜索信息，或则表单缓存的场景。

为什么

为什么要使用这个标签呢？目前在前端项目中，缓存方案无非就是

• 浏览器缓存json数据，再进行解析
• vuex状态管理方案
• keepalive标签保留组件状态
  而keepalive组件是vue官方支持的一种比较好的解决方案，在使用方面也比较简单。

怎么做

1. vue-router配置路由参数
   其实很多项目中配置的路由参数都不一样，所以这里把需要的参数全部放进meta里，这样保证不受其他路由配置项影响

{
    path: '/foo',
    meta: {
        keepAlive: true,
        name: 'ComponentName' // 对应vue文件里的name属性，如果其他配置项带了这个参数可以直接使用，这里用处主要是可以注销不用的keepalive组件
    }
}

2.<router-view>
常见的router-view配置都是这样的，这里keepalive标签比平时配置多了一个:include属性，用于注销不用的组件。用一个keepAliveComp判断当前标签页的缓存页面，如果从标签页移除则注销该缓存页面。标签页的数组需要注意去重。

<keep-alive :include="keepAliveComp">
            <router-view
                          class="avue-view"
                          v-if="$route.meta.keepAlive" />
          </keep-alive>
          <router-view
                        class="avue-view"
                        v-if="!$route.meta.keepAlive" />

export default {
  computed: {
    keepAliveComp() {
      // 缓存keepalive列表 用于注销不在标签页的keepalive组件
      let arr = []
      this.tagList.map(item => {   //tagList是标签页的数组
        if (item.meta.keepAlive) return arr.push(item.meta.name)
      })
      return arr
    }
  }
}

同一个组件重复keepalive无效

因为当前处理keepalive的逻辑，是利用了组件中的name属性，当使用同一个组件时，name就会相同，那怎么解决这个问题呢？经过思考和借助网络力量，找到一下两种比较合适的解决方案

• router-view上添加key属性
• 用到同一个组件的地方包装一层组件，赋予不同的name

我一开始用的是第二种方法，但后面总觉得不太合理，于是翻了很多文章，试了很多途径，最后发现第一种方法更加有效，并且去除了许多没用的代码。
原理是利用了key更新组件时判断两个节点是否相同，由于key不同，判断当前组件名字即使一样，其实也不是同一个组件。

参考： vue的key简单理解
vue，keep-alive，不同路由指向同一个组件，如何分别缓存页面状态