VUE3实现页面缓存，tab切换时不刷新

 

如上图所示，为了实现页面缓存，防止每次页面切换时重新刷新数据，前前后后尝试了多种写法，如上图被注释的那段写法，与没注释掉的写法，在router-view上主要是第一种写法有设置key属性，第二种没有，后面经过调试发现，在router-view上设置key属性，会导致keep-alive不生效。第二种写法把router-view上的key属性拿掉以后，keep-alive马上就生效了，tab切换时，不会导致组件重新执行onMounted生命周期函数，只有在第一次会执行onMounted方法，后面切换回去时执行的是onActivated方法。