這幾天因為這個問題，絞盡腦汁啊。

我的專案是【 div元素內部的滾動條滾動，而不是body 】，所以解決這個問題，首先必須清楚自己的專案滾動條到底是誰的!!!!

話不多說，程式碼送上。

一：  首先為需要保留滾動條的元件開啟快取

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      meta:{
        keepAlive: true    //為需要保留滾動條的元件開啟快取
      },
      component:resolve => require(['@/views/home.vue'],resolve),
    },
    {
      path: '/words/:id',
      name: 'Words',
      component: Words,
      meta:{
        keepAlive: false
      }
    }
  ],

})
 

二：  在app.vue檔案中給開啟快取的元件和沒有開啟的做區分

<template>
  <div id="app">
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>
</template>
 

三：   在需要快取滾動條的元件頁面加入下面的程式碼

	beforeRouteLeave (to, from, next) {
			this.scrollTop = document.querySelector('.wrap').scrollTop
                    //儲存滾動條元素div的scrollTop值
			next()
		},
	beforeRouteEnter (to, from, next) {
			next(vm => {
				document.querySelector('.wrap').scrollTop = vm.scrollTop
                    // 為div元素重新設定儲存的scrollTop值
			})
	},
 

大功告成，親測有效，有其他問題的同學可以瀏覽討論。。。

轉發請附帶原地址！！！