vue实现不刷新整个页面刷新数据

vue实现不刷新整个页面刷新数据

clipboard.png

这样就出现了一个bug,如新闻列表页和发布新闻页面已通过点击左侧导航打开并添加至标签栏

此时，用户通过发布新闻栏目发了一条新闻，点击新闻列表查看的时候，结果因为之前有专门处理点击标签栏标签切换至的页面不刷新,造成新闻列表页列表并没有刚刚添加的新闻，只有强制刷新才能出现，这样肯定是不行的

解决这个bug就需要实现无刷新加载数据

vue实现无刷新加载数据，使用的技术是依赖注入 关键字为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()

页面来源：https://www.jianshu.com/p/26d37a1d5b73

根据此篇文字加以补充