如標(biāo)題呀页，有個需求如下：
有三個頁面A妈拌、B、C。A跳轉(zhuǎn)B尘分，B再跳轉(zhuǎn)C猜惋，然后C返回B的時候B需要緩存，包括它的轉(zhuǎn)跳C之前的數(shù)據(jù)與滾動的高度培愁，然后再由B跳轉(zhuǎn)回A以后著摔，在由A頁面跳轉(zhuǎn)進(jìn)B時需要重新刷新B的數(shù)據(jù)。
具體點：
A頁面是一個商店的商品列表：
- 本子
- 鉛筆
- 書包
B頁面是一個訂單列表（如A的鉛筆商品的所有訂單）：
- 訂單1
- 訂單2
- 訂單3
- 訂單4
- 訂單5
C頁面是訂單詳情（B的某個訂單的詳情）
訂單詳情頁
我選擇了A的鉛筆定续，然后跳轉(zhuǎn)到B谍咆，所有跟鉛筆的訂單列表出來了，我往下滾動找到訂單5私股，然后點擊了訂單5摹察，跳轉(zhuǎn)C頁面顯示訂單5的訂單詳情。
然后我從C返回B的時候倡鲸，需要停留在我點擊了訂單5的高度以及所有數(shù)據(jù)都不能刷新供嚎。
然后我又從B返回了A，選擇了本子商品跳轉(zhuǎn)B峭状，然后B要刷新成本子商品的訂單列表克滴，然后跳轉(zhuǎn)C（刷新成本子選中訂單的詳情）
以上是需求，接下來是解決方法：
我一開始在項目上使用了keep-alive的這種方法用來區(qū)分緩存與不緩存的頁面（網(wǎng)上找的方法）
<keep-alive>
<router-view v-if="$route.meta.keepAlive"> </router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
這個做法其實是錯誤的优床，除非你沒有像B這樣需要有兩個狀態(tài)的頁面的時候劝赔。
然后我發(fā)現(xiàn)了$destory()，于是我換成了這樣的做法：
<keep-alive :include="['A', 'B']">
<router-view > </router-view>
</keep-alive>
發(fā)現(xiàn)只要是$destroy()以后胆敞，這個頁面再也不能緩存了着帽。。移层。（不知道大家有沒有找到能緩存的方法启摄，反正我沒找到，找到了請告訴我一下謝謝）
然后各種beforRouteLeave各種to.fullPath各種$destroy()各種試各種@#￥%……&%￥￥#%......
然后在我腦中滋生了根據(jù):include的['a', 'b']的變化來控制是否緩存的想法幽钢，找來找去發(fā)現(xiàn)好像要用到vuex管理一下狀態(tài)歉备，但是這個項目沒必要再加上vuex，我就直接放棄了（是的匪燕，根本不想試一試）蕾羊，然后這個需求困擾了我一段時間。帽驯。
直到我突然想試一下beforRouteEnter是什么效果龟再！
然后我就
beforeRouteEnter(to, from, next) {
next(vm => {
// 通過 `vm` 訪問組件實例
if (from.fullPath == '/A' && to.fullPath == '/B') {//一定是從A進(jìn)到B頁面才刷新
vm.updataB();//updataB是本來寫在mounted里面的各種
}
})
}
?? ?????? ???????? ?? ?? ?? ?? ????
我突然的就成功了????
代碼如下：
//App.vue的template
<keep-alive :include="['A', 'B']">
<router-view > </router-view>
</keep-alive>
//B.vue，溫馨提示：beforeRouteEnter與mounted同級哦尼变，不是在methods里面的利凑，很多新手不知道該往哪里放浆劲，比如以前的我
beforeRouteEnter(to, from, next) {
next(vm => {
// 通過 `vm` 訪問組件實例
if (from.fullPath == '/A' && to.fullPath == '/B') {//一定是從A進(jìn)到B頁面才刷新
vm.updataB();//updataB是本來寫在mounted里面的各種東東
}
})
}
好的以上，大家要是發(fā)現(xiàn)有什么奇怪的地方請多指教哀澈。
