vue keepalive全局点击，根据改变在当前页面发送请求

最新推荐文章于 2023-04-23 16:29:23 发布

Dao_bing

最新推荐文章于 2023-04-23 16:29:23 发布

阅读量1k

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/weixin_39981509/article/details/109519877

版权

笔记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

vue keepalive遇到的问题

最近负责的一个农垦局项目，使用keepalive缓存组件的时候遇到一个问题;
该系统页面的结构为左边栏是一个所有农场的树组件，该组件为全局组件，即页面的切换路由的改变不会影响该组件，只切换右边的组件,因为考虑到页面的快速渲染因此使用了vue的keepalive组件。
交互需要为: 在左边选择树节点之后，右边页面需要携带已选择的节点id请求后端。
在这里插入图片描述

此时就存在几个问题:
1.左边栏树节点选择之后，需要右边的当前页面侦听，立即发送请求
2.左边栏节点改变之后，所有页面组件都需要记录这个改变，在下次打开该页面的时候发送请求
3.如果左边的树没有改变的话不应该发送请求，消耗没有意义的带宽

第一点的话很好解决用watch侦听就行，但是如果所有页面都使用watch侦听，必然会导致非当前路由的页面发送不必要的请求。
第二点可以配合activited钩子进行解决，但是也会产生一个新的问题，就是每次打开keepalive的页面都会调用该钩子发送请求，消耗没有必要的带宽，影响js性能

解决办法

在左边树组件中使用addEventListener绑定一个事件，使用一个map集合接收目标方法，代码如下：

在这里插入图片描述

回调函数中的逻辑为：判断当前路由是否为配置的路由（即route），是的话就直接遍历运行方法数组，如果不是的话就代表需要往map中存入已配置的路由（route）为key，funcList为value的集合数据，使用Map的原因是：map中key唯一存在，如果存入同一个key的数据会覆盖掉之前的，能保证遍历map的时候方法只运行一次；

在watch中侦听路由的改变，确定当前路由中有没有需要运行的方法，如果有的话匹配key，遍历运行方法，然后删除该索引；

在对应的页面中调用该事件，参数一为需要配合左边树运行的方法数组，参数二为路由name
在这里插入图片描述