Vue頁面返回滾動位置恢復(keep-alive滾動記憶)

更新時間：2025年09月21日 08:35:18 作者：_AaronWong

Vue中通過自定義組合式函數(shù)useScroll,結(jié)合ref響應式狀態(tài)、生命周期鉤子及DOM引用,實現(xiàn)keep-alive緩存組件的滾動位置保存與恢復,優(yōu)化用戶返回時的瀏覽體驗,感興趣的可以了解一下

在Vue單頁應用開發(fā)中，我們經(jīng)常會遇到這樣的場景：用戶在一個長列表頁面滾動瀏覽了若干項后，點擊進入詳情頁，然后返回期望能夠回到之前的滾動位置，而不是重新回到頁面頂部。這種用戶體驗的優(yōu)化對于內(nèi)容型應用尤為重要。

Vue的<keep-alive>組件可以緩存頁面狀態(tài)，但它并不自動保存和恢復滾動位置。今天我們就來探討一種優(yōu)雅的解決方案。

核心代碼解析

import { onActivated, ref } from "vue";
import { onBeforeRouteLeave } from "vue-router";

export function useScroll(targetRef) {
    const scrollTop = ref(0);
    
    onActivated(() => {
        if (targetRef.value) {
            targetRef.value.scrollTop = scrollTop.value
        }
    })
    
    onBeforeRouteLeave(() => {
        if (targetRef.value) {
            scrollTop.value = targetRef.value.scrollTop
        }
    })
}

這個自定義組合式函數(shù)useScroll雖然代碼簡潔，但功能強大且完整。讓我們分解一下它的工作原理：

1. 響應式狀態(tài)管理

使用ref(0)創(chuàng)建了一個響應式的scrollTop變量，用于存儲滾動位置。

2. 生命周期鉤子運用

onActivated: 當被<keep-alive>緩存的組件激活時調(diào)用，用于恢復滾動位置
onBeforeRouteLeave: 在路由離開之前調(diào)用，用于保存當前滾動位置

3. 引用DOM元素

通過targetRef參數(shù)接收一個DOM元素的引用，這使得函數(shù)可以靈活應用于任何可滾動元素

完整使用示例

<template>
  <div class="product-list" ref="scrollTarget">
    <div v-for="product in products" :key="product.id" class="product-item">
      <h3>{{ product.name }}</h3>
      <p>{{ product.description }}</p>
      <button @click="goToDetail(product)">查看詳情</button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useScroll } from '@/composables/useScroll'

const router = useRouter()
const scrollTarget = ref(null)
const products = ref([...]) // 產(chǎn)品列表數(shù)據(jù)

// 使用滾動記憶功能
useScroll(scrollTarget)

const goToDetail = (product) => {
  router.push(`/product/${product.id}`)
}
</script>

<style scoped>
.product-list {
  height: 100vh;
  overflow-y: auto;
}
</style>

路由配置要點

為了使<keep-alive>生效，需要在路由配置和組件渲染中做相應設(shè)置：

// router.js
const routes = [
  {
    path: '/products',
    component: () => import('@/views/ProductsView.vue'),
    meta: { keepAlive: true } // 添加元信息標識需要緩存的頁面
  }
  // ...其他路由
]

<!-- App.vue -->
<template>
  <router-view v-slot="{ Component, route }">
    <keep-alive>
      <component 
        :is="Component" 
        v-if="route.meta.keepAlive" 
        :key="route.name"
      />
    </keep-alive>
    <component 
      :is="Component" 
      v-if="!route.meta.keepAlive" 
      :key="route.name"
    />
  </router-view>
</template>

進階優(yōu)化

1. 多滾動容器支持

實際應用中，一個頁面可能有多個滾動區(qū)域，我們可以擴展useScroll來支持這種情況：

export function useScroll(targetRef, identifier = 'default') {
    const scrollPositions = ref({});
    
    onActivated(() => {
        if (targetRef.value) {
            targetRef.value.scrollTop = scrollPositions.value[identifier] || 0;
        }
    })
    
    onBeforeRouteLeave(() => {
        if (targetRef.value) {
            scrollPositions.value[identifier] = targetRef.value.scrollTop;
        }
    })
}

2. 防抖處理

對于高頻觸發(fā)滾動事件的情況，可以添加防抖優(yōu)化：

import { debounce } from 'lodash-es';

export function useScroll(targetRef) {
    const scrollTop = ref(0);
    
    onActivated(() => {
        if (targetRef.value) {
            targetRef.value.scrollTop = scrollTop.value;
        }
    })
    
    const saveScrollPosition = debounce(() => {
        if (targetRef.value) {
            scrollTop.value = targetRef.value.scrollTop;
        }
    }, 100);
    
    onMounted(() => {
        if (targetRef.value) {
            targetRef.value.addEventListener('scroll', saveScrollPosition);
        }
    });
    
    onUnmounted(() => {
        if (targetRef.value) {
            targetRef.value.removeEventListener('scroll', saveScrollPosition);
        }
    });
}

到此這篇關(guān)于Vue頁面返回滾動位置恢復(keep-alive滾動記憶)的文章就介紹到這了,更多相關(guān)Vue 滾動位置恢復內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: