新指令化管理滾動狀態地址https://blog.csdn.net/theoneEmperor/article/details/82669022(歡迎star)，滾動條儲存以及回退只需要一條指令，讓你為所欲為。

        最近學了下node，自己用vue和node弄了個專案。在首頁跳到詳情頁，然後從詳情頁再跳回來的時候，發現總是要重新整理頁面，這樣對使用者操作很不友好，意味著使用者不能從上次離開的時候開始瀏覽，體驗極差。我就想能不能回退不重新整理，並且記錄滾動條的位置，進行復原。

用到keep-alive做快取的情況

       於是就利用了官網上的keep-alive，把要快取的頁面包裹起來。可能有寫介面不需要快取，那麼可以把狀態寫在路由裡面進行控制，例如：

// router.js
{ path: '/register', name: 'register', component: register, meta: { keepAlive: false } },

// App.vue 動畫的實現，就交給大家集思廣益了
<transition :name="transitionName" mode="out-in">
    <keep-alive>
        <router-view class="child-view" v-if="$route.meta.keepAlive"></router-view> 
    </keep-alive>
</transition>
<transition :name="transitionName" mode="out-in">
    <router-view class="child-view" v-if="!$route.meta.keepAlive"></router-view> </transition>
 

false表示不需要快取，true表示需要快取。使用後，發現頁面是快取了，但是滾動條還是個問題。

解決方案：離開之前先把滾動條位置存起來，就是dom的scrollTop，scrollLeft屬性，看你的需求來，如果儲存有效期只儲存到整個vue例項的建立和銷燬，也就是app的開啟和關閉，可以存進vuex裡面，自己寫套規則也行。如果向儲存久點，丟進localStorage，瀏覽器資料庫等等都行。回來的時候再把它取出來滾動到相應位置就行了。這時候就需要區分滾動條的型別了，分為window全域性滾動條和區域性滾動條。

created () {
	this.$nextTick(() => {
		window.scrollTo(x, y); // 全域性滾動條
		// 區域性滾動
		dom.scrollTop = x;
		dom.scrollLeft = y;
	})
}
 

如果this.$nextTick失效，不能滾動到目標位置，可以試著用setTimeout包裹，不過極大機率會有從0跳動到目標位置一閃的瞬間，解決方案放到下面一起講。

不用keep-alive

        對於分頁載入的列表一定要用keep-alive，或者用我最上面推薦的那個外掛裡面介紹的寫法，然後用vuex把資料快取起來，這樣比keep-alive好點。因為如果你遇到還有tab切換的選項卡型多列表共用一個滾動條現象就比較麻煩了。

       對於一般的不分頁的，如果不用keep-alive，也會存在從0到目標位置的閃動，視覺效果極差，可以做一些平滑處理。可以路由切換時加個極短時間的動畫，來完美錯過這個跳動的時間。還可以加一些請求時的loading動畫，效果最好的是加在初始化請求的axios攔截器裡(ps：假設你用的是axios)，效果非常好。好的動畫外掛比如：animate.css等，vue的官網上都有推薦。就用到了官網給出的transition。多個頁面，直接用多個transition包裹，名字保持一致就好了，具體程式碼：

 <transition :name="transitionName" mode="out-in">
     <router-view class="child-view"></router-view>
</transition>

如果是全域性滾動條的話，可以往其函式裡傳入options來平滑過渡，具體如下：

window.scrollTo({
  top: x,
  left: y,
  behavior: 'smooth'
});

到這裡，就差不多解決了。無時不在，歡迎討論。