大白蘿蔔小課堂開講了！帶你玩轉vue前進後退按需重新整理！

用vue做後臺管理專案，特別是有列表頁、列表資料詳情頁、列表資料修改頁功能的碼友們，幾乎都被vue前進後退都重新整理的邏輯坑過，本蘿蔔更是！

蘿蔔的產品經理老先生（人稱老白，送外賣的進來都叫老先生）的要求是 : 

  1.列表頁進入詳情頁返回列表頁時列表不能重新整理，連頁數、篩選條件等都不能變

  2.列表頁進列表資料編輯頁若資料有改動返回列表頁列表資料得重新整理，但頁數、篩選條件等都不能變 

  3.非詳情頁、編輯頁進入列表頁時列表資料得重新整理，頁數、篩選條件等都全部重置

並且向我甩出一個相信你行的小表情

總結一下老先生的中心思想就是‘這個列表頁我想讓它重新整理，他就得重新整理，不想讓他刷，他就得待著別的，具體怎麼刷我說了算’

不知如何是好的蘿蔔眼淚成河，啊！不，是流成一片湖

收起眼淚，擼起袖子加油幹！第一版傻子式的操作就是將列表頁的頁數、篩選條件等在詳情頁和編輯頁來回帶。那叫一個累！並且點著點著就跑的沒邊了。

問了問度媽媽，知道有個keep-alive元件，對，是它，就是它，我們的小哪吒！

但單純的keep-alive妹子是前進後退都不會重新整理的，所以需要改造一下，讓它乖乖聽話。這個過程需要路由小哥的路由引數meta配合我們。

以上皆為閒扯片，可以略過，下面開始正題！！！

1.在路由檔案中為目標列表頁設定meta引數，裡面包含keepAlive和ifDoFresh欄位

{
    path:'*',
    name:'datalist',
    component: resolve => require(['@/view/datalist'], resolve),
    meta:{
        keepAlive: true,
        ifDoFresh:false
    }
},

2.在程式主入口main.vue中設定頁面根據keepAlive欄位判斷是否使用keep-alive元件。

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

3.在目標列表頁的beforeRouteEnter方法中判斷頁面進入方式（詳情頁，編輯頁或其他方式），根據需求將路由引數的ifDoFresh欄位設為true/false，

在頁面的activated（開啟了 keepAlive: true的頁面在第二次進入時是無法觸發mounted發法的）方法中根據ifDoFresh欄位判斷是否重新整理頁面。

beforeRouteEnter (to, from, next) {
    if(from.name!='詳情頁'&&from.name!='編輯頁')
    { 
        to.meta.ifDoFresh = true; 
    } 
    next(); 
}, 
activated(){ 
  //開啟了keepAlive:true後再次進入，以前的搜尋條件和頁數都不會變，無論什麼情況都呼叫一下獲取資料的介面，這樣就能得到當前搜尋條件和頁數的最新資料
  if(this.$route.meta.ifDoFresh){

   //重置ifDoFresh
    this.$route.meta.ifDoFresh = false;

　　//獲取列表資料方法第一引數為是否重置搜尋條件和頁數
        this.getData(true);
    }else{
        this.getData();
    }
}

 至此，完結！