页面刷新[provide 、inject]

2018-11-21  本文已影响0人  _我的天

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>
上一篇下一篇

猜你喜欢

热点阅读