zoukankan      html  css  js  c++  java
  • vue修改数据,刷新当前页面,重新渲染页面数据

    业务场景:在管理后台,在执行完,增,删,改,操作的时候。我们需要刷新一下页面,重载数据。在JQ中我们会用到location.reload()方法,刷新页面;在vue中,这里需要用到一个 provide / inject 这对用例。(其他方法:this.$router.go(0),会强制刷新,出现空白页面体验不好);

    原理是:通过控制router-view 的显示与隐藏,来重渲染路由区域,重而达到页面刷新的效果。

    代码如下:

    1:在父组件中加入

    <template>
      <div id="app">
            <router-view v-if="isRouterAlive"></router-view>
      </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
           })
        }
      },
      components:{
      }
    }
    </script>

    2:然后在子组件export default中引入

    inject:['reload']

    3:最后在执行完相应的操作,后调用reload方法就可以了!

    this.reload();
  • 相关阅读:
    软件工程作业03
    PSP0级要求02
    PSP0级要求日志
    软件工程个人作业02
    第三周学习进度
    第二周学习进度
    软件工程个人作业01
    Web网页登录设计
    第一周学习进度
    第三周学习进度条+PSP0过程文档
  • 原文地址:https://www.cnblogs.com/finghi/p/12688619.html
Copyright © 2011-2022 走看看