zoukankan      html  css  js  c++  java
  • vue 如何刷新界面

    业务场景:

    vue项目中遇到对当前页面进行数据操作时需要实时更新数据,页面需要刷新;
    在jquery里面可以使用location.reload()方法,刷新页面;
    在vue中,使用this.$router.go(0)也能实现刷新,但是会出现短暂空白,用户体验效果不好,
    所以可以尝试使用provide / inject 这对用例

    这对选项需要一起使用,以允许一个根组件向其所有子组件注入一个依赖,实现原理就是通过控制router-view 的显示与隐藏,来重渲染路由区域,重而达到页面刷新的效果,show -> false -> show

    实现如下:

    • 1.根组件APP.vue代码如下,写入刷新方法,路由初始状态是显示的
    <template>
      <div id="app">
            <router-view v-if="active"></router-view>
      </div>
    </template>
     
    <script>
    export default {
      name: 'App',
      provide (){
         return {
           reload:this.reload
         }
      },
      data(){
        return {
           active:true
        }
      },
      methods:{
        reload (){
           this.active = false
           this.$nextTick(function(){
              this.active = true
           })
        }
      },
      components:{
              header
      }
    }
    </script>
    • 2.然后在子组件里面进行引用
    export default {
          name: "accredit",
          inject:"[reload]",
          data() {
              msg:"hello"
          }
    }
    • 3.在执行完相应的操作后,调用reload方法即可
    	this.reload()
  • 相关阅读:
    MongoDB
    Flask-Migrate
    Flask-Script
    Flask-SQLAlchemy
    SQLAlchemy
    DBUtils
    依存句法分析
    如何将本地的jar包上传到maven本地仓库中
    git使用手册
    中文网页编解码问题
  • 原文地址:https://www.cnblogs.com/chase-star/p/13476795.html
Copyright © 2011-2022 走看看