如何实现vue中不跳转不闪动页面刷新？provide /inject 完美解决方案

Lavender 发布于2019-08-23 16:56 / 2691人阅读

摘要：在的项目中刷新功能你会怎么写我之前一直用这个方法用户体验很不好，因为页面会闪动一下刷新直到我发现了这个方法不过这个方法貌似有兼容问题，首先要确定一下你的版本，此方法适用原理此方法使用的是来控制的显示或隐藏，从变为时，会重新渲染区域，

在vue的项目中刷新功能你会怎么写？
我之前一直用this.$router.go(0)这个方法用户体验很不好，因为页面会闪动一下刷新
直到我发现了这个方法 provide /inject
不过这个方法貌似有兼容问题，首先要确定一下你的vue版本，此方法适用vue 2.20+
原理：此方法使用的是v-if来控制router-view的显示或隐藏，v-if从false变为true时，vue会重新渲染router-view区域，所以当参数变化时，只需让v-if 从true => false => true,就能实现页面刷新
首先，找到自己的route-view

//App.vue

然后在下显示的vue页面中进行如下操作

    export default {
      name: "newproduct",
      inject:["reload"],//在export default下面加上这一段
      method:{
        //调用App.vue下的this.reload()方法，来改变v-if的状态
        clickDiv(){//刷新按钮调用的方法
          this.reload()
        }
      }

就ok了

加油！每天进步一点点！

GPU云服务器云服务器页面不跳转注册页面不跳转 jsp不跳转页面跳转 php实现无刷新跳转

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/103541.html

vue组件间通信六种方式（完整版）

摘要：本文总结了组件间通信的几种方式，如和，以通俗易懂的实例讲述这其中的差别及使用场景，希望对小伙伴有些许帮助。状态改变提交操作方法。前言组件是 vue.js最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。一般来说，组件可以有以下几种关系：showImg(https://segmentfault.com/img/remote/146000001...

frontoldman 2019-08-26 13:48 评论0 收藏0
vue组件间通信六种方式（完整版）

摘要：本文总结了组件间通信的几种方式，如和，以通俗易懂的实例讲述这其中的差别及使用场景，希望对小伙伴有些许帮助。状态改变提交操作方法。前言组件是 vue.js最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。一般来说，组件可以有以下几种关系： showImg(https://user-gold-cdn.xitu.io/2019/5/17/16ac35bf...

DDreach 2019-05-21 16:37 评论0 收藏0
vue-route的问题，跳转不刷新。

摘要：如题，最近遇到一个奇怪的问题。第一次进去某个页面完全正常，第二次带不同的值进去，页面显示还是第一个页面的值，但是数据传进去了。第三次则显示第二次数值的页面。如题，最近遇到一个奇怪的问题。vueroute第一次进去某个页面完全正常，第二次带不同的值进去，页面显示还是第一个页面的值，但是数据传进去了。第三次则显示第二次数值的页面。用了监听路由变化的方法下面是详细过程这是页面的creat...

PiscesYE 2019-08-22 18:14 评论0 收藏0
vue组件通信全面总结

摘要：当一个组件没有声明任何时，这里会包含所有父作用域的绑定和除外，并且可以通过传入内部组件在创建高级别的组件时非常有用。写在前面组件间的通信是是实际开发中非常常用的一环，如何使用对项目整体设计、开发、规范都有很实际的的作用，我在项目开发中对此深有体会，总结下vue组件间通信的几种方式，讨论下各自的使用场景文章对相关场景预览父->子组件间的数据传递子->父组件间的数据传递兄弟...

余学文 2019-08-23 12:16 评论0 收藏0