页面刷新[provide 、inject]

1.通过刷新路由
2.通过建立中间页面
3.通过自定义reload方法

下面通过provide与inject来实现页面的刷新
  1. App.vue
  <div id="app" class="l-app">
    <router-view v-if="isRouterAlvie "></router-view>
  </div>
</template>

<script>
  export default {
    name: 'app',
    provide () {
      return {
        reload: this.reload
      }
    },
    data () {
      return {
        isRouterAlvie: true
      }
    },
    methods: {
      reload () {
        this.isRouterAlvie = false
        this.$nextTick(function () {
          this.isRouterAlvie = true
        })
      }
    }
  }
</script>  

2.对应要刷新的页面引入()

<template>
  <div class ='children'>
    <!-- 内容 -->
  </div>
</template>
<script>
export default {
  name:'children',
  inject:['reload'],
  data() {
    return {
      
    }
  },
  created() {
    
  },
  methods: {
    changeStaut () {
      // 逻辑代码
      this.reload()//调用后页面刷新
    }
    
  }
}
</script>
<style scoped >

</style>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。