使用keep-alive标签来进行对页面的缓存
<router-view v-slot="{ Component, route }">
<component
v-if="!route.meta.keepAlive"
:is="Component"
:key="route.fullPath"
/>
<keep-alive>
<component
v-if="route.meta.keepAlive"
:is="Component"
:key="route.fullPath"
/>
</keep-alive>
</router-view>
const router = createRouter({
//记录离开时的位置,再次进入此路由直接跳转到此位置
scrollBehavior(to, form, savedPosition) {
// console.log(savedPosition, to)
return savedPosition || { top: 0 };
},
});
//或者:
/** 处理详情页面跳转后,回到列表滚动位置不缓存问题 */
let scrollTopNum = 0;
onBeforeRouteLeave((to, from, next) => {
//记录
scrollTopNum = document.querySelector('.van-pull-refresh')?.scrollTop || 0;
next();
});
onActivated(() => {
const $wrapper = document.querySelector('.van-pull-refresh');
if ($wrapper) {
//强行设置
$wrapper.scrollTop = scrollTopNum;
}
});
/** 处理详情页面跳转后,回到列表滚动位置不缓存问题 */
//但是都要建立在keep-alive的基础上