在使用vue開發(fā)單頁面應用程序的時候，列表數據是經常會出現的，加載列表數據的邏輯通常是寫在列表頁面的created或者mounted鉤子里面的：
用戶通常的行為是點擊列表的某一項會跳轉一個新的頁面。問題往往就從這里開始了，為了解決單向數據流和但頁面程序數據共享的問題，通常會使用vuex配合vue來開發(fā)，也會用到vue-router來作為前端頁面的路由控制。
當加載數據的時候，猶豫數據量的問題，翻頁是很有必要的（例子是針對移動端向下滑動加載更多），首先把數據加載的類型分為兩種，一種是APPEND，另一種是SET。
可以理解為列表初始化的時候，在state里面有一個dataList：
上面的圖片應該很好理解，我們可以在action面做如下控制：
這樣在頁面獲取數據的時候，可以傳入type參數來控制是追加數據還是刷新數據。初始化的時候是SET，后面翻頁都是APPEND
接下來問題就出現了，往往，在我們點擊列表數據跳轉頁面之后，再返回的時候，期望是返回到原來我們頁面的位置，也就是滾動的高度要保留。但是頁面初始化的時候，我們會刷新列表數據，也就是說原來的很多頁數據已經不存在了，只有第一頁的數據。
這個問題可以使用vue-router巧妙的解決，首先在跳轉頁面之前，可以加一段邏輯處理：
通過replace方法，替換掉當前的頁面的url，'/current/page/path'就是當前頁面的path，query是新加的參數，keepList是是否加載數據的標示，currentPage是當前列表的頁數，scrollTop是頁面的滾動高度，這個滾動高度需要根據實際情況（滾動的容器）去設置。
當然如果頁面還有其他的查詢參數也要補充進去，這樣我們這個頁面的url就被更新了。之后，在mounted鉤子中添加如下邏輯處理：
這樣在返回到列表頁面的時候，如果查詢參數中有我們設置的值，列表數據就會保留，并且滾動到之前離開時候的位置，如果沒有，那就會出發(fā)初始化列表數據的邏輯，加載列表。
往往我們在離開列表數據的時候，需要將state中的dataList置空，防止下次進入頁面加載未返回結果時，顯示的是老數據，一般情況下，通常會在vue-router的beforeRouteLeave鉤子中做這件事情，這里只需要加一個判斷的邏輯，把我們需要保留的path過濾掉就好：
