页面跳转再退回到原页面时,缓存离开的位置

53 阅读1分钟

使用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的基础上