vue實現(xiàn)不刷新整個頁面刷新數(shù)據(jù)

clipboard.png

這樣就出現(xiàn)了一個bug,如新聞列表頁和發(fā)布新聞頁面已通過點擊左側(cè)導(dǎo)航打開并添加至標(biāo)簽欄

此時，用戶通過發(fā)布新聞欄目發(fā)了一條新聞，點擊新聞列表查看的時候，結(jié)果因為之前有專門處理點擊標(biāo)簽欄標(biāo)簽切換至的頁面不刷新,造成新聞列表頁列表并沒有剛剛添加的新聞，只有強制刷新才能出現(xiàn)，這樣肯定是不行的

解決這個bug就需要實現(xiàn)無刷新加載數(shù)據(jù)

vue實現(xiàn)無刷新加載數(shù)據(jù)，使用的技術(shù)是依賴注入 關(guān)鍵字為provide inject

在App.vue中

<template>
  <div id="app"> 
    <router-view v-if="isRouterAlive"/> 
  </div> 
</template>
 name:'app',
 provide :function() { 
  return { 
    reload:this.reload
   } 
}, 
data:function(){
   return { 
    isRouterAlive:true 
  } 
}, 
methods:{ 
  reload:function(){ 
    this.isRouterAlive=false; 
    this.$nextTick(function(){ 
      this.isRouterAlive=true 
    }) 
  } 
}

然后在需要使用這個方法的的vue組件中注入這個方法

data(){},
inject:["reload"] //然后在你想要使用的地方 使用就可以了 this.reload()

頁面來源：http://www.itdecent.cn/p/26d37a1d5b73

根據(jù)此篇文字加以補充