vue中，我們所要實(shí)現(xiàn)的一個(gè)場景就是：
1.搜索頁面==>到搜索結(jié)果頁時(shí)艇潭，搜索結(jié)果頁面要重新獲取數(shù)據(jù)拼窥，
2.搜索結(jié)果頁面==>點(diǎn)擊進(jìn)入詳情頁==>從詳情頁返回列表頁時(shí)，要保存上次已經(jīng)加載的數(shù)據(jù)和自動(dòng)還原上次的瀏覽位置蹋凝。
最近在項(xiàng)目中遇到這個(gè)問題鲁纠，思考了幾套方案，總是不太完善鳍寂。百度搜到的方案也基本都只能滿足一些很簡單的需求改含。對于復(fù)雜一些的情況，還是有些不完善的地方迄汛。以下是個(gè)人對于這種場景的一個(gè)摸索捍壤，也參考了百度。如有更好的方案鞍爱，歡迎指出鹃觉。
緩存組件，vue2中提供了keep-alive硬霍。首先在我們的app.vue中定義keep-alive:
<keep-alive>
<router-view v-if="route.meta.keepAlive"/> 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ù)，而其他頁面進(jìn)入list是重新刷新數(shù)據(jù)的抽减。
至此允青，一個(gè)前進(jìn)刷新、后退返回的功能基本完成了卵沉。
如果場景再復(fù)雜一丟丟颠锉，比如，如果這個(gè)詳情頁是個(gè)訂單詳情史汗，那么在訂單詳情頁可能會(huì)有刪除訂單的操作琼掠。那么刪除訂單操作后會(huì)返回訂單列表頁，是需要列表頁重新刷新的停撞。那么我們需要此時(shí)在訂單詳情頁進(jìn)行是否要刷新的判斷瓷蛙。簡單改造一下詳情頁：
data () {
return {
isDel: false // 是否進(jìn)行了刪除訂單的操作
}
},
beforeRouteLeave (to, from, next) {
if (to.name == 'List') {
// 根據(jù)是否刪除了訂單的狀態(tài)，進(jìn)行判斷l(xiāng)ist是否需要使用緩存數(shù)據(jù)
to.meta.isUseCache = !this.isDel;
}
next();
},
methods: {
deleteOrder () {
// 這里是一些刪除訂單的操作// 將狀態(tài)變?yōu)橐褎h除訂單 // 所以beforeRouteLeave鉤子中就會(huì)將list組件路由的isUseCache設(shè)置為false // 所以此時(shí)再返回list時(shí)戈毒，list是會(huì)重新刷新數(shù)據(jù)的 this.isDel = true; this.$router.go(-1) }}
至此艰猬，算是解決了我的vue項(xiàng)目中的這個(gè)前進(jìn)刷新、后退緩存數(shù)據(jù)和瀏覽位置的問題埋市。
最后再提一下冠桃，頁面滾動(dòng)位置的問題。
問題1：我們知道道宅，在vue這種單頁應(yīng)用中食听，如果你在a頁面滾動(dòng)了一段距離后，此時(shí)前往b頁面后污茵，b頁面也會(huì)停留在a頁面的滾動(dòng)位置碳蛋。這個(gè)問題的解決，我們可以利用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.如果通過瀏覽器自帶的前進(jìn)后退按鈕切換的路由，那么會(huì)自動(dòng)使用瀏覽默認(rèn)的回滾上次頁面的瀏覽位置玷室。
2.如果是通過vue路由進(jìn)行的頁面切換零蓉。例如a前往b，首先判斷a是不是通過keep-alive緩存的組件穷缤，如果是敌蜂，則在a路由的meta中添加一個(gè)savedPosition字段，并且值為a的滾動(dòng)位置津肛。最后return的是頁面需要回滾的位置章喉。如此一來，如果打開一個(gè)頁面，該頁面的組件路由中meta.savedPosition為undefined的話秸脱，則頁面滾動(dòng)到（0,0）的位置落包，這樣解決了問題1。那么如果打開一個(gè)頁面摊唇，它的路由的meta.savedPosition有值的話咐蝇，則滾動(dòng)到上次瀏覽的位置，因?yàn)閙eta.savedPosition保存的就是上次瀏覽的位置巷查。
如果覺得有幫助的話有序，就收藏一下吧！
