精华内容
下载资源
问答
  • 主要介绍了vue this.reload 方法 配置,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
  • Vue 使用 reload 刷新当前页面

    千次阅读 2019-11-06 15:54:36
    vue-router重新路由到当前页面,页面是不进行刷新的 采用window.reload(),或者router.go(0)刷新时,整个浏览器进行了重新加载,闪烁,体验不好 解决方法 provide / inject 组合 作用:允许一个祖先组件向其...

    场景

    在处理列表时,常常有删除一条数据或者新增数据之后需要重新刷新当前页面的需求。

    解决问题

    1. 用vue-router重新路由到当前页面,页面是不进行刷新的

    2. 采用window.reload(),或者router.go(0)刷新时,整个浏览器进行了重新加载,闪烁,体验不好

    解决方法

    provide / inject 组合

    作用:允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效。

    <template>
        <el-container>
            <el-main>
                <router-view v-if="isRouterAlive" />
            </el-main>
        </el-container>
    </template>
    <script>
    import Vue from 'vue';
    import Component from 'vue-class-component';
    export default @Component({
        provide() {
            return {
                reload: this.reload,
            };
        },
    })
    class Main extends Vue {
        isRouterAlive = true;
    
        reload() {
            this.isRouterAlive = false;
            this.$nextTick(() => {
                this.isRouterAlive = true;
            });
        }
    }
    

    在使用reload的页面:

    import Vue from 'vue';
    import Component from 'vue-class-component';
    
    export default @Component({
        inject: ['reload'],
    })
    class Child extends Vue {
        handleSwitchOrg() {
            this.reload();
        }
    }
    </script>
    
    展开全文
  • vue页面刷新 reload()

    万次阅读 2019-06-10 08:23:32
    首先在vue里配置 在所想添加reloadvue里直接如下:
    展开全文
  • vue-vuex, Vue & Vuex & Express Hot-Reload
  • 可以在必要的时候使用此方法 但在vue项目中直接使用reload()方法刷新页面是无效的并还会报错 是因为我们并没注入相关依赖 使用inject方式注入 首先在app.vue的文件中插入 并配置成全局 <template> <div id...

    reload()方法用于刷新当前文档。
    reload() 方法类似于你浏览器上的刷新页面按钮。
    可以在必要的时候使用此方法 但在vue项目中直接使用reload()方法刷新页面是无效的并还会报错 是因为我们并没注入相关依赖
    使用inject方式注入
    首先在app.vue的文件中插入 并配置成全局

    <template>
      <div id="app">
        <router-view v-if="isRouterAlive" />
      </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>
    

    然后在需要的页面中使用inject注入

      inject: ['reload'],
    

    代码块

    <template>
        <button @click="check">刷新页面</button>
    </template>
    export default {
      inject: ['reload'],
      data() {
        return {
          }
        }
      },
      created() {
      },
      methods: {
      //刷新页面
        check() {
        this.reload()
        }
      }
    }
    </script>
    
    展开全文
  • 利用v-if控制router-view,在路由容器组件,如APP.vue中实现一个刷新方法 <template> <router-view v-if="isRouterAlive"/> </template> <script> export default { data () { r

    使用场景为增加商品表单,用户确定提交后,继续新增,需要清理之前用户输入数据,并对其初始化,再走一遍组件加载的流程,其中还包括几个子组件,如果手动去处理实在是太麻烦!!

    利用v-if控制router-view,在路由容器组件,如APP.vue中实现一个刷新方法

    <template>
      <router-view v-if="isRouterAlive"/>
    </template>
    <script>
    export default {
     data () {
       return {
         isRouterAlive: true
       }
     },
     methods: {
       reload () {
         this.isRouterAlive = false
         this.$nextTick(() => (this.isRouterAlive = true))
       }   
     }
    }
    </script>
    

    然后其它任何想刷新自己的路由页面,都可以这样:

    this.$root.reload()
    

    如果$root节点不是路由容器组件,可以使用provide / inject来传递reload

    路由容器组件:

    <template>
      <router-view v-if="isRouterAlive"/>
    </template>
    <script>
    export default {
      provide () {
        return {
          reload: this.reload
        }
      },
      data () {
        return {
          isRouterAlive: true
        }
      },
      methods: {
        reload () {
          this.isRouterAlive = false
          this.$nextTick(() => (this.isRouterAlive = true))
        }
      }
    }
    </script>
    

    子组件或者需要强制刷新的页面:

    <script>
    export default {
      inject: ['reload'],
      methods: {
        clickReload() { // 点击之后强制刷新
           this.reload()
         }
      }
    }
    </script>
    
    展开全文
  • 1.场景 在处理列表时,常常有删除一条数据或者新增数据之后需要重新刷新当前页面的需求。 2.遇到的问题 ...2.采用window.reload(),或者router.go(0)刷新时,整个浏览器进行了重新加载,闪烁,体验不好 ...
  • <p>I want to reload vuetable, when i click button each time assign new values to "api-url" and reload the vuetable. Is it possoble? </p><p>该提问来源于开源项目:ratiw/vuetable-2</p></div...
  • 主要介绍了在vue中使用[provide/inject]实现页面reload的方法,文中给大家提到了在vue中实现页面刷新不同的方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
  • vue 使用this.reload方法刷新页面配置

    千次阅读 2019-10-08 10:48:39
    1.在vue(app.vue文件)里配置: <template> <div> <router-view v-if="isRouterAlive" /> </div> </template> <script> export default { provide() { //提供reload方法...
  • vue-hot-reload-api 注意: vue-hot-reload-api@2.x仅适用于vue@2.x Vue组件的热重装API。 这就是和在引擎盖下使用的东西。 用法 仅当您基于Vue组件编写一些构建工具链时,才使用此功能。 对于正常的应用程序使用...
  • Vue-hot-reload-api 源码解析

    千次阅读 2017-08-19 19:35:04
    Vue-hot-reload-api 源码解析 起因 最近在搞san框架的热加载方案,自然是少不了向成熟的框架学习(偷窥ing)。热加载方案基本也只是主流框架在做,且做的比较成熟,大部分应用开发者并不会接触到这部分东西,所以...
  • == 200) { this.$message({ message: '系统错误', type: 'error' }) return } this.login = true this.username = resp.data.username }, methods: { reload () { this.isRouterAlive = false this.$nextTick...
  • 项目中有时候需要刷新页面,所以提供一种在vue里刷新页面的方法: 用[provide/inject]实现页面reload 1. 在App.vue中设置provide 2. 在相应的页面中通过inject调用,再在相应的方法中直接this.reload()使用 ...
  • window.reload是重新加载当前需要的...在APP.vue 中写一个版本号,在静态文件再写一个版本号,相互印证,如果不一样的话,就调用 location.reload() 自动刷新页面 app.vue 代码: var version = this.version; ...
  • VUEvue后台常用模板

    万次阅读 多人点赞 2019-04-11 15:30:13
    vue后台常用模板: element文档: http://element-cn.eleme.io/#/zh-CN/component/installation vue API: https://cn.vuejs.org/v2/api/ 以下是在下收集的三个常用的vue模板 1、vue-manage-system git地址:...
  • Vue中history.go(0)和location.reload()的区别 最直观的区别:history.go(0):刷新后滚动条的位置不变 location.reload():刷新后滚动条会回到顶端
  • 2、location.reload() / window.reload() 也是一样,画面一闪,体验不是很好 3、用vue-router路由到跳转到当前页面,页面是不进行刷新的。 不重新加载当前页刷新应用的场景 1、工作真实遇到-> 点击取消按钮,清空...
  • Vue项目中动态切换中英文语言(实现无需页面reload) 如题,在项目工作中总会有切换语言的需求,我们脑中很快就能浮现出 Vue.i18n.locale = 'zh'; //或者 Vue.i18n.locale = 'en'; 而因为中英文字在同一种字体下可能...
  • // 修改vue APP.vue文件 <template> <div id="app"> // 先将router-view 添加v-if或者v-show方法 通过控制显示和隐藏起到刷新页面的效果 <router-view v-if="isRouterAlive" /> ...
  • provide/inject:就是在父组件中通过provider来提供变量,然后在子组件中通过inject来 深层次 注入变量。(无论目标组件里父组件有多少间隔) ...一、app.vue <router-view v-if="isRouterAli...
  • Reload prevented.(翻译:编译时错误,重载预防) 解决方案:实际上是拼写错误, 不能查找到该文件报错,修正即可。 这个报错遇到几次了,尤其路由嵌套时,很不容易发现。所以 Reload prevented,以后...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 14,811
精华内容 5,924
关键字:

vue的reload

vue 订阅