技术栈：vue，vue-router
是什么
keep-alive是vue中提供缓存不活动组件的标签，可以支持一些如返回页面，缓存当前分页信息、搜索信息，或则表单缓存的场景。
为什么
为什么要使用这个标签呢？目前在前端项目中，缓存方案无非就是
- 浏览器缓存json数据，再进行解析
- vuex状态管理方案
- keepalive标签保留组件状态
而keepalive组件是vue官方支持的一种比较好的解决方案，在使用方面也比较简单。
怎么做
- 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不同，判断当前组件名字即使一样，其实也不是同一个组件。
