qq_26205989的博客

原创 Vue3 keep-alive实现通过key值来控制是否缓存页面

在实际开发中会用到动态路由,也就是一个组件根据参数不同显示成不同的页面,vue现在的缓存机制是根据组件名称来实现的,一旦这个组件其中一个页面关闭触发缓存的清理机制就会导致这个组件其他的实例一起被清理掉.实现原理是在原有的组件外层包裹一个使用key值来命名的壳,成为一个新的组件.通常使用路由的完整路径作为key既能保证唯一也方便操作。//壳组件的名字,路由的路径是唯一的。//使用key值作为名字给即将渲染的组件包裹一层壳来保证被Vue正常缓存。// 自定义name的壳的集合。// 自定义name的壳的集合。