页面离开再次进入要加载离开时用户输入的或者点击的如何缓存vue2写个例子

很高兴回答您的问题，以下是一个基于Vue2的简单例子：

在需要缓存的组件中，我们可以利用Vue的keep-alive组件来实现缓存。具体实现方法如下：

<template>
<div>
<!-- 在需要缓存的组件上添加keep-alive组件 -->
<keep-alive>
<router-view></router-view>
</keep-alive>
</div>
</template>

<script>
export default {
name: "CacheComponent",
// 在组件销毁前将组件状态进行缓存
beforeRouteLeave(to, from, next) {
const cacheData = JSON.stringify(this.$data);
sessionStorage.setItem("cacheData", cacheData);
next();
},
// 在组件重新进入时读取缓存的组件状态
created() {
const cacheData = sessionStorage.getItem("cacheData");
if (cacheData) {
try {
const data = JSON.parse(cacheData);
Object.keys(data).forEach((key) => {
this.$data[key] = data[key];
});
} catch (e) {
console.warn("Failed to restore cache data:", e);
}
}
},
};
</script>

在这个例子中，我们利用Vue的keep-alive组件来缓存组件的状态。在组件销毁前，我们将组件状态进行序列化，然后存储到sessionStorage中。在组件重新进入时，我们读取缓存的组件状态，然后将它们反序列化并还原组件的状态。这样可以保证用户离开页面时输入的或者点击的内容得到缓存，当用户再次进入页面时，这些内容就可以被重新加载。