vue中，我們所要實現(xiàn)的一個場景就是：

1.搜索頁面==>到搜索結果頁時，搜索結果頁面要重新獲取數(shù)據(jù)，

2.搜索結果頁面==>點擊進入詳情頁==>從詳情頁返回列表頁時，要保存上次已經(jīng)加載的數(shù)據(jù)和自動還原上次的瀏覽位置。

最近在項目中遇到這個問題，思考了幾套方案，總是不太完善。百度搜到的方案也基本都只能滿足一些很簡單的需求。對于復雜一些的情況，還是有些不完善的地方。以下是個人對于這種場景的一個摸索，也參考了百度。如有更好的方案，歡迎指出。

緩存組件，vue2中提供了keep-alive。首先在我們的app.vue中定義keep-alive:

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

這里是根據(jù)路由中的meta源信息中的keepAlive字段來判斷當前路由組件是否需要緩存。這里的meta的keepAlive是我們自定義的，當然你也可以叫別的名字。

下面在router/index.js即我們的路由文件中，定義meta信息：

// list是我們的搜索結果頁面{   path: '/list',  name: 'List',   component: resolve => require(['@/pages/list'], resolve),  meta: {    isUseCache: false, // 這個字段的意思稍后再說    keepAlive: true // 通過此字段判斷是否需要緩存當前組件  } },

上面的component: resolve => require(['@/pages/list'], resolve)這里的組件引入方式可能和大家平時寫的有些不一樣，這里是為了路由的懶加載用的，大家可以忽略。按照正常的import引入也可以，這個和本次的主題無關。如此一來，vue的路由會幫我們去緩存list頁面。

刷新數(shù)據(jù)or緩存數(shù)據(jù)的實現(xiàn)：

說這之前，先簡單說一下和緩存相關的vue鉤子函數(shù)。

設置了keepAlive緩存的組件：

第一次進入：beforeRouterEnter ->created->…->activated->…->deactivated

后續(xù)進入時：beforeRouterEnter ->activated->deactivated

可以看出，只有第一次進入該組件時，才會走created鉤子，而需要緩存的組件中activated是每次都會走的鉤子函數(shù)。所以，我們要在這個鉤子里面去判斷，當前組件是需要使用緩存的數(shù)據(jù)還是重新刷新獲取數(shù)據(jù)。思路有了，下面我們來實現(xiàn)：

// list組價的activated鉤子 activated() { // isUseCache為false時才重新刷新獲取數(shù)據(jù) // 因為對list使用keep-alive來緩存組件，所以默認是會使用緩存數(shù)據(jù)的    if(!this.$route.meta.isUseCache){     this.list = []; // 清空原有數(shù)據(jù)  this.onLoad(); // 這是我們獲取數(shù)據(jù)的函數(shù) } },

這里的isUseCache 其實就是我們用來判斷是否需要使用緩存數(shù)據(jù)的字段，我們在list的路由的meta中已經(jīng)默認設置為false，所以第一次進入list時是獲取數(shù)據(jù)的。