好久没更新博客了,重复拧螺丝
keepalive之前用过,但是好久了,所以这次遇到问题觉得有点新颖
我遇到的问题是在路由里面设置子路由,子路由的router-view设置keepalive不生效的问题
之前用了keep-alive没有用v-slot
因为router-view就是一个单独的组件,他的本质并不是使用url对应的组件代替他的位置,而是它的内部有一个插槽存在,当我们没有使用这个插槽时,他会默认的插入url对应的组件,所以其实url对应的组件并不是代替他的位置,而是作为他的子组件放入了插槽中,所以keep-alive没效果并不是因为组件太多,因为如果像动态组件一样,根据不同情况变成不同的组件,那么当变成组件名匹配的组件时,那么keep-alive反倒会生效,正式因为router-view从来没变过,所以我们包裹它不会有任何效果,而且对其内部的子组件没有任何意义,即使我们使用include属性,keep-alive也只是对router-view进行了缓存,而其内部的子组件,依旧不会有任何反应
这其实就是在提醒我们,使用router-view中的插槽完成keep-alive包裹,router-view中的插槽是作用域插槽,其内部向外传递了一个对象,对象内部包括了当前url对应的route对象,和组件实例对象,通过组件实例对象,我们就可以在自己的代码中实现组件的渲染,然后就可以轻松的写上keep-view,代码就如上图了,就可以了
虽然我不懂props.Component是如何产生作用的
参考如下博客:https://blog.csdn.net/dxh9231028/article/details/131423235
标签:插槽,router,alive,keep,vue3,组件,失效,keepalive,view From: https://www.cnblogs.com/qingcui277/p/18068108