工作160:总结VUE几种页面刷新方法

有时候在页面里做了某些操作以后,需要页面刷新一下来重新获取数据。试了几种方法,以下总结:

1、this.$router.go(0)

这种方法页面会一瞬间的白屏,体验不是很好,虽然只是一行代码的事

2、location.reload()

这种也是一样,画面一闪,效果总不是很好

3、跳转空白页再跳回原页面

在需要页面刷新的地方写上:this.$router.push('/emptyPage'),跳转到一个空白页。在emptyPage.vue里beforeRouteEnter 钩子里控制页面跳转,从而达到刷新的效果
 

beforeRouteEnter (to, from, next) {next(vm => {vm.$router.replace(from.path)})
}。


这种画面虽不会一闪,但是能看见路由快速变化。

4、控制<router-view>的显示隐藏

默认<router-view v-if="isRouterAlive" />isRouterAlive肯定是true,在需要刷新的时候把这个值设为false,接着再重新设为true:
 

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


这种方法从画面上是看不出破绽的。也可以搭配provide、inject使用。例如:

<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})}}}
</script>




然后在需要刷新的页面引入依赖:inject: ['reload'],

在需要执行的地方直接调用方法即可:this.reload()。

我的业务需求是在home里,页面右上角,在我的里面点击修改个人资料成功后,页面1就要刷新一下,如果是在app里面搭配provide、inject这样用的话,会出现一个问题,就是所有的弹窗以及menu部分就都不见了。还没有找到为什么,,

后来发现,我的需求不通过刷新页面也可以解决,就是利用VUE组件通信,监听事件发生,然后重新调一下获取数据的接口就行。

也就是说:

1、给Vue的原型上添加一个bus属性

main.js:Vue.prototype.$bus = new Vue()

2、home页面进行修改个人资料操作时触发事件,

home.vue: changeProfile () {this.$bus.$emit('change')}

3、页面1里监听如果执行了操作,就调取页面1需要重新加载的数据接口。
 

mounted () {this.$bus.$on('change', ()=> {this.doSomething()})
},


对于我的需求来说,页面刷新的第四种方法和利用组件通信都能解决我的问题,前者更简单后者更专业,也更强大。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/415324.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

linux中修改字符编码

一. ubuntu修改字符编码 1. 添加字符编码&#xff0c;例如zh_CN.UTF-8&#xff0c;有两种方式 方法1&#xff1a;locale-gen zh_CN.UTF-8 #locale-gen命令只在ubuntu中才有 方法2&#xff1a;在/var/lib/locales/supported.d/local中添加字符集zh_CN.UTF-8&#xff0c;保存后…

iview代码片段 去除水平menu底部横线

此处记录日常写的小代码片段 直接使用iview的Menu在底部会出现一条border线&#xff0c;而我的使用场景&#xff0c;不需要border线。所以我就覆盖一下它原来的样式&#xff0c;就可以了。 代码&#xff1a; .ivu-menu-light {&:after {height: 0px !important;}}效果&a…

Android 实现指纹识别demo

demo链接&#xff1a;https://download.csdn.net/download/meixi_android/10796468 1、指纹工具类&#xff1a; /*** 作者&#xff1a;created by meixi* 邮箱&#xff1a;13164716840163.com* 日期&#xff1a;2018/8/30 09*/public class FingerprintManagerUtil {private …

工作161:eachart渲染步骤

第一步 页面 第二步 第三步 方法调用

vue js xlsx 读取 本地 excel

最近在写一个人力资源管理系统&#xff0c;主要目的是将本地的excel文件读取解析&#xff0c;将有效数据传到后台。 下文介绍流程&#xff0c;文末附有参考文章。 1、安装npm包xlsx yarn add xlsx2、结合上传组件和自己写的读取方法readXLSX&#xff0c;可以进行本地excel读…

Android 上下滚动字幕实现

首先values文件夹下添加或创建attrs文件&#xff0c;如下&#xff1a; <?xml version"1.0" encoding"utf-8"?> <resources><!--//垂直滚动字幕--><declare-styleable name"VerticalRollingTextView"><!--文字颜色-…

mongoose获取最高分

我的需求&#xff1a;获取所有成绩中的最高分。 方法&#xff1a;根据分数倒序&#xff0c;查询第一个。 const topScore await Score.find().sort({ score: -1 }).skip(0).limit(1);

工作163:eachrt修改

<template><div><el-card><el-card><time-selects GetTime"GetTime"></time-selects><!--第一步 页面--><div id"main" :style"{ width: 1000px, height: 300px }"></div><div id&quo…

Android 使用ViewPager实现view轮播效果,单个item分页样式,多个item分页样式,横向listview

效果 单个item样式 多个item样式 横向item 自定义viewpager——可开关切换动画 public class NoAnimationViewPager extends ViewPager {public NoAnimationViewPager(Context context) {super(context);}public NoAnimationViewPager(Context context, AttributeSet attrs) …

高德地图开发 怎么去除城市信息

主要通过设置features&#xff0c;里面不要填写point&#xff0c;代表标注即可。 mapConfig {zoom: 17,cityName: MapCityName,pitch: 25,viewMode: 3D,features: [bg, road, building]}官方参考文档&#xff1a;https://lbs.amap.com/api/javascript-api/example/personaliz…

工作164:对父和混入的理解

1点击按钮看编辑事件 2点击编辑之后 对当前页面的方法进行调用 3找到子组件下面的混入方法 create下面引入混入 4找到子组件混入下面的混入方法 5找到下面的getlist方法

Minimum supported Gradle version is 4.1. Current version is 4.0.

Android studio 项目无法编译&#xff0c;报错如下&#xff1a; Minimum supported Gradle version is 4.1. Current version is 4.0. Please fix the projects Gradle settings. Gradle settings 解决方法&#xff1a; 项目build.gradle下 classpath com.android.tools.…

ubuntu16.04 安装caffe以及python接口

http://blog.csdn.net/qq_25073253/article/details/72571714http://blog.csdn.net/greed7480/article/details/68486039 首先在你要安装的路径下 clone &#xff1a;git clone https://github.com/BVLC/caffe.git 进入 caffe &#xff0c;将 Makefile.config.example 文件复制…

mongodb $ifNull

$ifNull用于判断第一个表达式是否为 NULL&#xff0c;如果为 NULL 则返回第二个参数的值&#xff0c;如果不为 NULL 则返回第一个参数的值。 $ifNull表达式格式为&#xff1a; { $ifNull: [ <expression>, <replacement-expression-if-null> ] }例子&#xff1a;…

Failed to resolve: android.arch.lifecycle:runtime:1.0.0,Failed to resolve: support-v4

Android studio 导入项目报错&#xff1a; Failed to resolve: com.android.support:support-core-ui:26.1.0 Add Google Maven repository and sync project Open File Show in Project Structure dialog Failed to resolve: android.arch.lifecycle:runtime:1.0.0 Open Fil…

工作165:混入调用的时候

直接created里面定义 不需要在其他位置进行过多操作

Hibernate总结

1.为什么要使用Hibernate开发你的项目呢&#xff1f;Hibernate的开发流程是怎么样的&#xff1f; 为什么要使用①.对JDBC访问数据库的代码做了封装&#xff0c;大大简化了数据访问层繁琐的重复性代码。②.Hibernate 是一个基于JDBC的主流持久化框架&#xff0c;是一个优秀的ORM…

mpvue 中控制swiper滑动,禁止滑动,只允许左滑动,不允许右滑

直接禁止滑动&#xff0c;使用&#xff1a;catchtouchmove参数就OK。 例子&#xff1a; <swiper-item v-for"(item,index) in examList" :key"index" catchtouchmove"false">content</swiper-item>但是我的需求是进行人员测评&…

工作166:错误的处理方式

1这种处理没有数据 2 这样处理勉强调用了接口 但是获取数据还是有问题