zoukankan      html  css  js  c++  java
  • vue页面刷新

    vue刷新当前页面有挺多种方法,比如

    window.location.reload()

    或者

    this.$router.go(0)

    但是这两种方法是会出现一瞬间的白屏,体验不好,所以这里给大家推荐第三种比较好用的刷新页面的方法

    //全局配置刷新功能

    在app.vue的<router-view></router-view>加上v-if属性

    <router-view v-if="isRouterAlive"></router-view>
    

    在data里面加上isRouterAlive,当然这个属性名可以自己定义,默认值为true

      data () {
          return {
            isRouterAlive: true
          }
      }
    

    methods里面加入一个刷新的方法

    methods: {
        reload () {
          this.isRouterAlive = false
          this.$nextTick(function() {
             this.isRouterAlive = true
          })
        }
      }
    

    最后,需要把这个函数 provide 出去

    provide () {
        return {
          reload: this.reload
        }
      }
    

    这样,app.vue上就设置完了

    那么当我们需要刷新的时候,在需要的页面上加上这个函数就可以了

    首先注入这个函数

    inject: ['reload']
    

    然后在需要用到这个函数的地方去引用就行了

    refresh () {
      this.reload()
    }
    

    这样子就可以刷新页面了,而且不会出现白屏的情况,比前面两种方法好用,推荐大家使用。

    附带上完整代码

    <template>
      <div id="app">
        <div class="wrap">
          <router-view v-if="isRouterAlive"></router-view>
        </div>
      </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
          })
        }
      }
    }
    </script>
    
    <style>
      #app{
        position: relative;
      }
      @media only screen and (min- 1200px) {
        .wrap{
           65%;
          margin: 0 auto;
        }
      }
      
    </style>
    //以上是在全局配置刷新页面
    <template>
        <button @click="refresh"></button>
    </template>
    <script>
        export default{
            name: 'refresh',
            inject: ['reload'],  //注入函数
            methods: {
                  refresh () {
                      this.reload()
                  }
            }
        }
    </script>
    

     

  • 相关阅读:
    js实现选择切换
    Jquery操作select
    Mybatis 高级结果映射 ResultMap Association Collection
    jQuery的一些特性和用法
    利用JSONP解决AJAX跨域问题的原理与jQuery解决方案
    List转成Array 连个Array比较
    3.15
    Get 和 Post 方法的选择和URL的设计
    fd
    如何维护一个1000 IP的免费代理池
  • 原文地址:https://www.cnblogs.com/maibao666/p/11175839.html
Copyright © 2011-2022 走看看