美文网首页
页面刷新[provide 、inject]

页面刷新[provide 、inject]

作者: _我的天 | 来源:发表于2018-11-21 15:04 被阅读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>
    

    相关文章

      网友评论

          本文标题:页面刷新[provide 、inject]

          本文链接:https://www.haomeiwen.com/subject/lykcqqtx.html