工作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()})
},
对于我的需求来说,页面刷新的第四种方法和利用组件通信都能解决我的问题,前者更简单后者更专业,也更强大。
工作160:总结VUE几种页面刷新方法相关推荐
- 总结vue几种页面刷新方法
有时候在页面里做了某些操作以后,需要页面刷新一下来重新获取数据.试了几种方法,觉得下面的方法比较实用: 1.location.reload() 优点:代码简单 缺点:会造成页面空白,体验不好 2.th ...
- js常见的几种页面刷新方法
js常见的几种页面刷新方法如下: 1 history.go(0); 2 location.reload(); 3 location=location; 4 location.assign(locati ...
- 工作88:vue实现当前页面刷新
想必大家在刨坑vue的时候也遇到过下面情形:比如在删除或者增加一条记录的时候希望当前页面可以重新刷新或者如下面这种: 如果希望点击确定的时候,Dialog 对话框关闭的时候,当前http://loca ...
- Vue 三种强制刷新方法的机制、使用场景、开销说明
前言 在日常 Vue 项目开发中,我们或多或少需要对组件进行强制刷新操作.比如,明明更新了 data 属性的值,但是页面上显示的还是旧的数据.又比如,在某些时候,我们想要一个全新的.干净的组件:或者是 ...
- 解决:vue项目的页面刷新之 title被重置问题
如何解决:vue项目的页面刷新之 title被重置问题? 需求场景描述:(以title名为"个人中心"页面为例) 用户初次访问进入"个人中心"页,浏览器显示的页 ...
- 防止页面刷新过多js_JavaScript多种页面刷新方法小结
1,reload 方法 该方法强迫浏览器刷新当前页面. 语法:location.reload([bForceGet]) 参数: bForceGet, 可选参数, 默认为 false,从客户端缓存里取当 ...
- vue跳转页面的方法
** vue跳转页面的方法 ** 1.router-link跳转 <!-- 直接跳转 --> <router-link to='/index'><button>点击 ...
- VUE监听页面刷新和关闭事件
背景:公司有一个数据看板,,需求是要统计看板有多少人看过,,每个人停留的曝光时间 使用技术:目前使用的技术是 后端Springboot 权限用的是SpringSecurity,前端页面是 Vue+El ...
- vue 监听页面刷新或关闭
参考:https://blog.csdn.net/weixin_43915587/article/details/93628935 发现 beforeDestroy 只能监听到页面间的跳转,无法监听到 ...
最新文章
- Laravel和Thinkphp有什么区别,哪个框架好用
- jsp:include和%@include%的区别
- 51单片机学习笔记(清翔版)(21)——ADDA数模转换
- 【机器学习入门笔记10:TensorFlow矩阵基础】20190217
- Linux安装minikube命令整理
- 【C语言】利用二维数组输出成绩
- FTP、WEB虚拟目录作用
- java 数据源xml 展示到界面_ZK开发关键知识点
- Android 反编译修改源码
- 显卡天梯图2021年9月新版
- shiny导出html,将R Shiny页面导出为PDF
- RecyclerView实现条目拖拽,左滑、右滑移除效果
- 快速填充表格中的空单元格
- 卸载工具Android,教你轻松卸载/删除Android手机内置游戏/软件
- 图论(9)图的连通度
- java word 模板_java根据模板生成word文件
- 代码管理工具:Git
- 【转租】【淞虹路独立厨卫一室户2700/月】【与房东直接签合同】
- android unity页面关闭报错,Unity3d报错解决方案
- 抖音短视频庞大的流量池,新手小白如何杀出一条血路
热门文章
- 爬虫结果数据完整性校验
- 洛谷 P1101 单词方阵
- 数据预处理和特征工程
- python编写脚本,删除固定用户下的所有表
- 动态SQL中变量赋值
- 驱动、数据库-Java HIVE 使用Jdbc连接Hive-by小雨
- 回滚机制_【巨杉数据库SequoiaDB】巨杉 Tech | 并发性与锁机制解析与实践
- eureka需要替换吗_Spring Cloud Alibaba迁移指南1:零代码从Eureka迁移到Nacos
- 【 Grey Hack 】万金油脚本:常见端口修改Password
- PWA(Progressive Web App)入门系列:(五)Web Worker