vue3使用keep-alive处理返回scrollTop

2023-10-10  本文已影响0人  LemonTree7

1、使用keep-alive进行缓存

<Suspense>
      <div>
        <router-view v-slot="{ Component }">
          <keep-alive>
            <component :is="Component" v-if="$route.meta.keepAlive"/>
          </keep-alive>
          <component :is="Component" v-if="!$route.meta.keepAlive"/>
        </router-view>
      </div>
    </Suspense>

页面激活的时候会触发onActivated;
如果存在多级的router-view,需要在每一级写上上面的缓存代码。

2、路由的scrollBehavior

 scrollBehavior: (to, from, savedPosition) => {
    if (savedPosition) return savedPosition;
    return { left: 0, top: 0 };
}
上一篇 下一篇

猜你喜欢

热点阅读