快捷導(dǎo)航

Vue頁面返回滾動(dòng)位置恢復(fù)(keep-alive滾動(dòng)記憶)

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

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

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

Vue的<keep-alive>組件可以緩存頁面狀態(tài)，但它并不自動(dòng)保存和恢復(fù)滾動(dòng)位置。今天我們就來探討一種優(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
        }
    })
}

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

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

使用ref(0)創(chuàng)建了一個(gè)響應(yīng)式的scrollTop變量，用于存儲(chǔ)滾動(dòng)位置。

2. 生命周期鉤子運(yùn)用

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

3. 引用DOM元素

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

完整使用示例

<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ù)

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

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

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

路由配置要點(diǎn)

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

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

<!-- 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>

進(jìn)階優(yōu)化

1. 多滾動(dòng)容器支持

實(shí)際應(yīng)用中，一個(gè)頁面可能有多個(gè)滾動(dòng)區(qū)域，我們可以擴(kuò)展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. 防抖處理

對(duì)于高頻觸發(fā)滾動(dòng)事件的情況，可以添加防抖優(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頁面返回滾動(dòng)位置恢復(fù)(keep-alive滾動(dòng)記憶)的文章就介紹到這了,更多相關(guān)Vue 滾動(dòng)位置恢復(fù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: