JZTXT

vue记录滚动位置

发布时间 2023-06-14 09:48:28作者: 只有一

1.目的

列表页进入详情页时缓存并记录滚动位置，返回列表页面不重新请求数据并滚动到离开时的位置

2.实现

2.1.单页面

不管是浏览器前后退还是router-link前后退都生效

    <router-view v-slot="{ Component }">
      <keep-alive :include="['NewBook']">
        <component :is="Component" />
      </keep-alive>
    </router-view>

// 滚动位置
    let scrollTop = 0;
    onActivated(() => {
      // 调用时机为首次挂载
      // 以及每次从缓存中被重新插入时
      document.documentElement.scrollTop = scrollTop; // 滚到之前的位置
    })

    onBeforeRouteLeave((to, from) => {
      scrollTop = document.documentElement.scrollTop; // 记住滚动位置
    })

2.2 多个页面（浏览器前后退生效）

<router-view v-slot="{ Component }">
      <keep-alive :include="['NewBook','SearchResults','Recommend','NewArrival','CatalogList']">
        <component :is="Component" />
      </keep-alive>
</router-view>

const router = createRouter({
    history: createWebHashHistory(),
    routes,
    scrollBehavior(to,from,savePosition){
        console.log(11,savePosition)
        return new Promise((resolve, reject) => {
            if(savePosition){// 浏览器前进后退按钮切换路由
                resolve(savePosition)
            }
            resolve({ left: 0, top: 0 }) // // 通过<router-link>切换
        })
    }
});

2.3 多页面（任何回退都生效）