Vue实现刷新当前页面，重载页面数据

前言

前几天在做个人播放器项目时，遇到一个问题：在进行搜索功能时，第一次搜索后，在搜素界面再次搜索时，发现搜索完成只是hash地址发生的转换，但是页面的数据并没有发生转换，也就是没能触发组件的刷新，由于搜索框的组件和搜索内容的组件二者之间不是父子组件也不是兄弟组件，很难实现数据交互。在苦恼许久查阅文档和百度搜索后，成功解决，给出以下解决方案给予参考。

该方案的应用场景可用于一些需要刷新页面，重载数据时，比如：在管理后台，在执行完，增，删，改，操作的时候等等。

解决方案

需要用到一个 provide / inject 这对用例。这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效

代码实现

在根组件中，也就是App.vue中写如下代码：

<template>
  <div id="app">
        <router-view v-if="isRouterAlive"></router-view>
        <index v-if="isRouterAlive"/>
      /*只要在想要刷新的组件中加上v-if="isRouterAlive"即可*/
  </div>
</template>
 
<script>
export default {
  name: 'App',
  provide (){
     return {
       reload:this.reload
     }
  },
  data(){
    return {
       isRouterAlive:true
    }
  },
  methods:{
    reload (){
       this.isRouterAlive = false
       this.$nextTick(function(){
          this.isRouterAlive = true
       })
    }
  },
  components:{
  }
}
</script>

在触发的子组件中引用即可

export default{
    inject:['reload'],
    data(){
        return{
            inputValue:''
     }
    },
    method:{
        toResult(){
        this.reload()
        }
    }
}

Tip: 只需要在子组件中引入inject:['reload']；然后调用reload()方法即可实现刷新；是不是很简单方便~~

在此分享给大家