vue自定义keepalive组件前阵子来了个新需求，在vue项目中实现一个打开更多标签页的功能，心想，这还不简单，就是增加按钮重定向？（当然这么简单我也不会写这篇文章）。尽快写完提交测试。测试小哥赶紧提交了一个问题：“你们两个tab页访问同一个链接，怎么还链接着呢？”。我擦了一下，说明是缓存问题。为什么会这样？keep-alive组件使用includeexclude这两个属性传入组件名来确认哪些可以被缓存。/router-view>看看源码看看他们是怎么实现的（这两个截图真丑)主要逻辑（直接讲上面代码）就是传入根据include和exclude两个属性数组，根据当前访问的组件名称判断。我们使用相同的链接访问具有相同名称（名称）的相同组件。第二次访问时，链接指向同一个组件。因为使用了组件的名称作为缓存键，所以此时会被认为是读缓存操作。缓存会直接加载渲染，所以有两个标签页访问同一个链接。在联动的情况下如何解决这个问题？这个之前比较简单，因为是用组件名作为key，所以我们不使用组件名作为key。是的，改成name+tab的index作为key。如果知道问题，如何解决？graphTBid2{keepalive是否缓存}-->id6[不需要缓存]id6-->id5id2-->id7[需要缓存]id7-.不缓存.->id3[缓存当前页面-vuex]id7-.cached.->id4[读取缓存-vuex]id4-->id5[渲染页面]id3-->id5[渲染页面]id1[tab1url]-->id2id8[tab2url]-->id2idea有代码group-keep-alive.jsfunctionremove(arr,item){if(arr.length){varindex=arr.indexOf(item)if(index>-1){returnarr.splice(index,1)}}}functiongetFirstComponentChild(children){if(Array.isArray(children)){for(vari=0;i/group-keep-alive>//keymust与computed:{key(){return`${Selectindex}/${fullpath}`},}题目讲完，整点1.在group-keep-alive组件中设置abstract:true,并将当前组件设置为抽象组件。李姐：是1提前拦截下一层（包括子元素）的事件监听，从而对下一层进行操作2.router-view:key="key"这个key用来区分是否相同的组件被重用的例子
