玩轉vue前進刷新，后退不刷新and按需刷新

大白蘿卜小課堂開講了！帶你玩轉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(); } }

 至此，完結！