工作88:vue实现当前页面刷新
想必大家在刨坑vue的时候也遇到过下面情形:比如在删除或者增加一条记录的时候希望当前页面可以重新刷新或者如下面这种:
如果希望点击确定的时候,Dialog 对话框关闭的时候,当前http://localhost:9530/#/supplier/supplierAll页面可以重新刷新下
那么表格的数据可以重新加载,Dialog 对话框设置的数据可以在确定后刷新出现在页面上
这时候我们最直接的思维就是想到下面这种:
但是,试过的会发现用vue-router重新路由到当前页面,页面是不进行刷新的,根本没有任何作用~所以这个方法out!
下面我这边整理几种可圈可点的三种方式,大家可以自行的选择:
1、最直接整个页面重新刷新:
location. reload()
this. $router. go( 0)
这两种都可以刷新当前页面的,缺点就是相当于按ctrl+F5 强制刷新那种,整个页面重新加载,会出现一个瞬间的空白页面,体验不好
2、新建一个空白页面supplierAllBack.vue,点击确定的时候先跳转到这个空白页,然后再立马跳转回来
空白页supplierAllBack.vue里面的内容:
这个方式,相比第一种不会出现一瞬间的空白页,只是地址栏有个快速的切换的过程,可采用
3、provide / inject 组合 方式是我试过最实用的,下面用项目截图给大家说明下:首先,要修改下你的app.vue
通过声明reload方法,控制router-view的显示或隐藏,从而控制页面的再次加载,这边定义了
isRouterAlive //true or false 来控制
然后在需要当前页面刷新的页面中注入App.vue组件提供(provide)的 reload 依赖,然后直接用this.reload来调用就行
至此,三种方式都介绍完了,如果对你有帮助记得给个赞哈~
工作88:vue实现当前页面刷新相关推荐
- 解决:vue项目的页面刷新之 title被重置问题
如何解决:vue项目的页面刷新之 title被重置问题? 需求场景描述:(以title名为"个人中心"页面为例) 用户初次访问进入"个人中心"页,浏览器显示的页 ...
- 工作160:总结VUE几种页面刷新方法
有时候在页面里做了某些操作以后,需要页面刷新一下来重新获取数据.试了几种方法,以下总结: 1.this.$router.go(0) 这种方法页面会一瞬间的白屏,体验不是很好,虽然只是一行代码的事 2. ...
- 总结vue几种页面刷新方法
有时候在页面里做了某些操作以后,需要页面刷新一下来重新获取数据.试了几种方法,觉得下面的方法比较实用: 1.location.reload() 优点:代码简单 缺点:会造成页面空白,体验不好 2.th ...
- VUE监听页面刷新和关闭事件
背景:公司有一个数据看板,,需求是要统计看板有多少人看过,,每个人停留的曝光时间 使用技术:目前使用的技术是 后端Springboot 权限用的是SpringSecurity,前端页面是 Vue+El ...
- vue 监听页面刷新或关闭
参考:https://blog.csdn.net/weixin_43915587/article/details/93628935 发现 beforeDestroy 只能监听到页面间的跳转,无法监听到 ...
- vue输入框回车页面刷新
问题描述: 在vue项目开发时,运用element-ui或者iView组件的Form组件:当Form组件中只有一个Input组件时,鼠标聚焦输入框后,点击回车键,页面就会刷新.例如以下代码: < ...
- vue router当前页面刷新后回到首页
在App.vue中直接写入以下代码 在created钩子函数中判断当前路由地址是否在首页home,如果不在则替换为home页面 created() {if (this.$router.path !== ...
- vue从后台获取新数据后刷新_vue传参页面刷新数据丢失问题
在做vue的时候,经常会遇到组件之间数据的传递问题,通过params或者query传参,但是,当页面刷新的时候,数据会丢失,找不到数据.今天经过总结,解决了这个问题.通过了一下几种情况进行传值: 通过 ...
- 解决Vue的history模式刷新页面出现404的问题
解决Vue的history模式刷新页面出现404的问题 路由的两种工作模式 (一).hash模式 地址中永远带着#号,不美观 若以后将地址通过第三方手机app分享,若app校验严格,地址会被标记为不合 ...
最新文章
- Onpaint和OnDraw的区别
- [原]vue实现全选,反选
- MYSQL 如果把数据文件保存到其他磁盘里
- SpringBoot静态资源配置原理(源码)
- warning: incompatible implicit declaration of built-in function ‘exit’
- ajax使用html()后样式无效,jquery.ajax使用字符串拼接后内联css样式失效
- 如何在README中使用图片
- MySQL备份shell_shell---mysql备份
- 事在四方,要在中央。圣人执要,四方来效
- Chrome浏览器启动命令行参数大全
- Git amend:修改最近一次提交
- 数字孪生技术在智慧城市建设中有哪些应用?
- macosx安装之旅(8)-常见问题(转载)
- 横版闯关手游【觉醒大陆90装备版】5月最新整理商业Linux手工服务端+吃鸡+组队PK+运营后台+CDK清包后台+GM授权后台+安卓苹果双端+视频教程+详细搭建教程
- 【STM32 .Net MF开发板学习-12】跳动的音符(PWM合成)
- appuim框架二次封装-UI自动化-自整理亲自实践
- mate 10android o主题,华为Mate 10 Pro体验:这才是全面屏手机该有的样子
- 什么是微信不死域名 微信不死域名的原理是什么
- Detect-SLAM阅读笔记
- 孕妇计算机老师待机房可以吗,微机房辐射对胎儿的影响
热门文章
- python-3.6.2安装
- jqueryui dialog asp.net服务端控件失效问题解决
- 在Xcode6中搭建Python开发环境
- 单元测试的一些基本概念
- 黑马程序员 java基础之网络编程TCP
- php hsetnx,HSETNX命令_视频讲解_用法示例-redis编程词典-php中文网
- python google drive api_Python管理Google Drive文件
- sony z2 android 5.0,索尼Xperia Z2 5.0 root教程_索尼Z2获取5.0系统的root
- html里空间顺序,按空间顺序写我的房间作文
- 【51单片机快速入门指南】2.4:74HC595、LED点阵屏及其SPI控制