VUE3 keep-alive的坑

这次项目是一个后台管理应用。就是有许多不同的内容列表要维护。那么作为内容管理员,相比是需要经常切换到不同板块的。这样每次切换来回都要摧毁组件再重新加载,会导致两个问题:

  1. 每次切换回页面都会重新调用接口获取数据
  2. 每次切换回页面,筛选框,表单都会重置回初始状态。

这样用起来会很烦的。

所以有keep-alive功能,直接加在component之前

跟route-view的兼容性问题

vue项目在实践里往往会用路由来管理页面,也就是app.vue下是首先是一个route-view,根据路由url切换显示内容。

这样跟keep-alive使用时,就有问题了。因为route-view在最外面,如果它决定摧毁重置页面,那么里面的keep-alive也就没用了。所以必须删除route-view里的key。或者改用route.name而不是path。这点我没看太懂。但总之意思应该是

vue的route里可以存一个唯一标识name。这个name相同就不摧毁组件。

include的问题

keep-alive添加后,里面的组件就都是keep-alive了,如果只想keep-alive其中一部分,就又是个问题了。需要給keep-alive一个include数组。里面存的是组件的名称。但是组件的name,在vue3里面的setup组件里,是不能直接給的。这下路子就被堵住了。

最后我采用了全局的方式来workaround。


评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注