vue中丸冕，我們所要實現(xiàn)的一個場景就是：
1.搜索頁面==>到搜索結(jié)果頁時沫勿，搜索結(jié)果頁面要重新獲取數(shù)據(jù)，
2.搜索結(jié)果頁面==>點擊進入詳情頁==>從詳情頁返回列表頁時区拳，要保存上次已經(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是我們的搜索結(jié)果頁面
{
path: '/list',
name: 'List',
component: resolve => require(['@/pages/list'], resolve),
meta: {
isUseCache: false, // 這個字段的意思稍后再說
keepAlive: true // 通過此字段判斷是否需要緩存當前組件
}
},
如此一來圣猎，vue的路由會幫我們?nèi)ゾ彺鎙ist頁面。
刷新數(shù)據(jù)or緩存數(shù)據(jù)的實現(xiàn)：
說這之前乞而，先簡單說一下和緩存相關(guān)的vue鉤子函數(shù)送悔。
設(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)默認設(shè)置為false，所以第一次進入list時是獲取數(shù)據(jù)的写半。
由于我們只要列表到詳情頁的時候緩存列表頁的數(shù)據(jù)岸蜗，所以我們要在列表頁的beforeRouteLeave的鉤子判斷，如果前往的是詳情頁面叠蝇，則緩存數(shù)據(jù)：
// 列表頁面的beforeRouteLeave鉤子函數(shù)
beforeRouteLeave (to, from, next) {
if (to.name == 'Detail') {
from.meta.isUseCache = true;
}
next();
},
現(xiàn)在璃岳，detail返回list頁面。list頁面已經(jīng)被緩存數(shù)據(jù)了蟆肆，那么現(xiàn)在如果前往search頁面后再前往list頁面時怎么讓list頁面不使用緩存數(shù)據(jù)而是獲取新數(shù)據(jù)呢矾睦？答案就在list頁面的activated鉤子中：
// 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ù)
}
// 通過這個控制刷新
this.$route.meta.isUseCache = false;
},
我們加了一行this.$route.meta.isUseCache=false;也就是從detail返回list后炎功，將list的isUseCache字段為false枚冗，而從detail返回list前，我們設(shè)置了list的isUseCache為true蛇损。所以赁温，只有從detail返回list才使用緩存數(shù)據(jù)，而其他頁面進入list是重新刷新數(shù)據(jù)的淤齐。
至此股囊，一個前進刷新、后退返回的功能基本完成了更啄。
如果場景再復(fù)雜一丟丟稚疹，比如，如果這個詳情頁是個訂單詳情祭务，那么在訂單詳情頁可能會有刪除訂單的操作内狗。那么刪除訂單操作后會返回訂單列表頁，是需要列表頁重新刷新的义锥。那么我們需要此時在訂單詳情頁進行是否要刷新的判斷柳沙。簡單改造一下詳情頁：
data () {
return {
isDel: false // 是否進行了刪除訂單的操作
}
},
beforeRouteLeave (to, from, next) {
if (to.name == 'List') {
// 根據(jù)是否刪除了訂單的狀態(tài)，進行判斷l(xiāng)ist是否需要使用緩存數(shù)據(jù)
to.meta.isUseCache = !this.isDel;
}
next();
},
methods: {
deleteOrder () {
// 這里是一些刪除訂單的操作
// 將狀態(tài)變?yōu)橐褎h除訂單
// 所以beforeRouteLeave鉤子中就會將list組件路由的isUseCache設(shè)置為false
// 所以此時再返回list時拌倍，list是會重新刷新數(shù)據(jù)的
this.isDel = true;
this.$router.go(-1)
}
}
至此赂鲤，算是解決了我的vue項目中的這個前進刷新噪径、后退緩存數(shù)據(jù)和瀏覽位置的問題。
頁面滾動位置的問題
問題1：
我們知道数初，在vue這種單頁應(yīng)用中找爱，如果你在a頁面滾動了一段距離后，此時前往b頁面后泡孩，b頁面也會停留在a頁面的滾動位置缴允。這個問題的解決，我們可以利用router本身提供的功能來解決：
routes: [
{
path: '/detail',
name: 'Detail',
component: resolve => require(['@/pages/detail'], resolve)
}
],
scrollBehavior (to, from, savedPosition) {
if (savedPosition) {
return savedPosition
} else {
if (from.meta.keepAlive) {
from.meta.savedPosition = document.body.scrollTop;
}
return { x: 0, y: to.meta.savedPosition || 0 }
}
}
scrollBehavior是路由提供的基礎(chǔ)功能珍德，這段函數(shù)寫的是：
1.如果通過瀏覽器自帶的前進后退按鈕切換的路由，那么會自動使用瀏覽默認的回滾上次頁面的瀏覽位置矗漾。
2.如果是通過vue路由進行的頁面切換锈候。例如a前往b，首先判斷a是不是通過keep-alive緩存的組件敞贡，如果是泵琳，則在a路由的meta中添加一個savedPosition字段，并且值為a的滾動位置誊役。最后return的是頁面需要回滾的位置获列。如此一來，如果打開一個頁面蛔垢，該頁面的組件路由中meta.savedPosition為undefined的話击孩，則頁面滾動到（0,0）的位置，這樣解決了問題1鹏漆。那么如果打開一個頁面巩梢，它的路由的meta.savedPosition有值的話，則滾動到上次瀏覽的位置艺玲，因為meta.savedPosition保存的就是上次瀏覽的位置括蝠。
