美文网首页
vue3使用keep-alive处理返回scrollTop

vue3使用keep-alive处理返回scrollTop

作者: LemonTree7 | 来源:发表于2023-10-10 16:51 被阅读0次

    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 };
    }
    

    相关文章

      网友评论

          本文标题:vue3使用keep-alive处理返回scrollTop

          本文链接:https://www.haomeiwen.com/subject/rjawbdtx.html