vue路由跳轉時進入新的頁面，滾動條的位置停留在上個頁面的位置，沒有回到頂部 keep-alive包裹的路由

需求分析：

一般這個功能在后台管理系統用的比較多，因為后台頁面都是在當前頁面打開，對於某些列表篩選頁，如果列表數據比較多，頁面就會滾動。當頁面發生滾動，對列表數據進行查看或者編輯的時候，跳轉到下一級頁面，然后點擊瀏覽器返回按鈕的時候，我們是希望能保持之前的滾動位置的。

緩存？解決這個問題，第一時間想到的是緩存keep-alive，但是緩存只是不執行create/mounted生命周期鈎子，頁面滾動位置是無法保留的，通過緩存的方法無法實現這個效果。

滾動？也有同事提過使用滾動模擬，但是vue是單頁面應用框架，整個項目就一個window對象，實現起來也是比較麻煩的，而且效果不一定好。

最后就找到了vue官方提供的進階功能——滾動行為，通過這個功能，可以自定義路由切換時頁面如何滾動。

功能行為 :

使用前端路由，當切換到新路由時，想要頁面滾到頂部，或者是保持原先的滾動位置，就像重新加載頁面那樣。 vue-router 能做到，而且更好，它讓你可以自定義路由切換時頁面如何滾動。

示例代碼：

const router = new Router({
    mode: "history",
    routes: routes,
    scrollBehavior(to, from, savedPosition) {
        console.log(savedPosition)
        if(savedPosition) {
            return savedPosition
        } else {
            return {
                x: 0,
                y: 0
            }
        }
    }
});

注意：該功能只能在history的路由模式下有效，對於某些頁面操作可能會影響上一個頁面的展示，那么上一個頁面就不應該做滾動處理，這個時候就可以根據路由的來源和去向來判斷是否需要滾動了。