vue使用this.$bus+keep-alive解決組件間跳轉(zhuǎn)傳參，參數(shù)無法保存問題
前言
這是我在最近工作中經(jīng)常遇到的問題，整理一下分享一波，希望大家也少踩坑。
問題描述
組件a使用this.$router.push({name: '組件b',params: '參數(shù)1'})傳遞參數(shù)并跳轉(zhuǎn)到組件b后，組件b用this.$route.param獲取到參數(shù)1，組件b跳轉(zhuǎn)到組件c，并攜帶參數(shù)2再跳轉(zhuǎn)回組件b，此時發(fā)現(xiàn)this.$route只能拿到參數(shù)2，拿不到參數(shù)1了。
原因就是組件b跳轉(zhuǎn)到組件c又跳轉(zhuǎn)回組件b，此時可以看做刷新了一次。
this.$route.param傳遞參數(shù)一般只用于簡單的單項傳遞，且不能刷新，一刷新參數(shù)就沒啦。
解決方法一：使用Vuex
每當(dāng)出現(xiàn)組件傳參問題時，我總會第一時間想到Vuex，Vuex確實能解決此類問題，但vuex適合大型項目跨組件儲存數(shù)據(jù)，若數(shù)據(jù)量不是很大，且有很多這種問題則vuex里會儲存的很雜很亂不好維護。之前看到過一句話，Vuex什么時候用？當(dāng)你覺得你的項目可用可不用的時候，那就不要用。
所以這里我選擇了另一種方法來解決這個問題。
解決方法二：使用bus+keep-alive
bus就是廣播一個方法，方法里可以攜帶參數(shù)，然后任意組件都可以監(jiān)聽這個廣播的方法，需要時接收廣播并獲取參數(shù)。功能和this.$router.push類似，只不過一個是定向跳轉(zhuǎn)，一個可以隨時接收。
- bus的基礎(chǔ)使用方法
1.在main.js定義bus`
2.組件c廣播事件
第180行this.$bus.$emit('itemCode', item)就是廣播，參數(shù)1是廣播的事件名，參數(shù)2是攜帶的參數(shù)。
第181行是路由跳回上一個路由。因為是從組件b跳到組件c，所以這里是跳回組件b。
3.組件b監(jiān)聽事件并接收參數(shù)
監(jiān)聽要在mounted生命周期里進行
第79行this.$bus.$on('itemCode', (item) => { })參數(shù)1itemCode是監(jiān)聽的事件名，參數(shù)2是一個函數(shù)，函數(shù)的參數(shù)是事件攜帶的參數(shù)item,可在函數(shù)體力進行數(shù)據(jù)處理操作，用箭頭函數(shù)是處理this指向問題。
這里要注意第78行this.$bus.off('itemCode')是取消監(jiān)聽事件itemCode,監(jiān)聽事件時一定要在監(jiān)聽之前先取消這個監(jiān)聽事件，否則會導(dǎo)致下次重復(fù)監(jiān)聽，函數(shù)體里的操作會被執(zhí)行多次。
- bus與keep-alive聯(lián)用處理參數(shù)無法保存問題
此方法會解決最開始問題描述中的問題。
1.根據(jù)問題描述可以知道，只有組件b要對組件a的參數(shù)緩存，所以將組件bFilterShop添加進keep-alive中。
include里可以放緩存多個頁面
2.組件a跳轉(zhuǎn)到組件b并攜帶參數(shù)
組件a廣播了一個事件workShop并攜帶參數(shù)this.workInfo,緊接著又使用this.$router.push跳轉(zhuǎn)到組件b并傳遞參數(shù)this.workInfo。為何要這樣寫的原因之后再說。
3.組件b監(jiān)聽組件a和組件c廣播的事件，且用
$this.route.params接收組件a的參數(shù)因為組件b在keep-alive里緩存了，所以組件b的生命周期改變，頁面第一次進入，鉤子的觸發(fā)順序created-> mounted-> activated，退出時觸發(fā)deactivated。當(dāng)再次進入（前進或者后退）時，只觸發(fā)activated。
因為路由跳轉(zhuǎn)的順序是組件a -> 組件b -> 組件c -> 組件b，所以當(dāng)組件a跳轉(zhuǎn)到組件b時，拿不到監(jiān)聽組件a發(fā)出的方法的參數(shù)，所以組件a的參數(shù)要現(xiàn)在created里通過
this.$route.params來獲取，之后組件b跳轉(zhuǎn)到組件c再跳轉(zhuǎn)回來后，其他生命周期都不會觸發(fā)，只觸發(fā)activated鉤子，此時的監(jiān)聽方法都會生效。所以組件a才需要寫兩種參數(shù)傳遞方法。此時在組件b中，組件a和組件c傳遞的參數(shù)都能拿到，問題解決~。
總結(jié)
最近我經(jīng)常用上面的方案二來解決類似的問題，把他分享給大家，并且如果有更好的方法或者我上面有什么說的不正確，也請大家多多指教。
