vue项目如何刷新当前页面

原文地址

想必大家在刨坑vue的时候也遇到过下面情形:比如在删除或者增加一条记录的时候希望当前页面可以重新刷新或者如下面这种:


如果希望点击确定的时候,Dialog 对话框关闭的时候,当前http://localhost:9530/#/supplier/supplierAll页面可以重新刷新下那么表格的数据可以重新加载,Dialog 对话框设置的数据可以在确定后刷新出现在页面上

这时候我们最直接的思维就是想到下面这种:


但是,试过的会发现用vue-router重新路由到当前页面,页面是不进行刷新的,根本没有任何作用~所以这个方法out!

下面我这边整理几种可圈可点的三种方式,大家可以自行的选择:

1、最直接整个页面重新刷新:


这两种都可以刷新当前页面的,缺点就是相当于按ctrl+F5 强制刷新那种,整个页面重新加载,会出现一个瞬间的空白页面,体验不好

2、新建一个空白页面supplierAllBack.vue,点击确定的时候先跳转到这个空白页,然后再立马跳转回来:


        空白页supplierAllBack.vue里面的内容:


这个方式,相比第一种不会出现一瞬间的空白页,只是地址栏有个快速的切换的过程,可采用

3、provide / inject 组合 方式是我试过最实用的,下面用项目截图给大家说明下:首先,要修改下你的app.vue:


通过声明reload方法,控制router-view的显示或隐藏,从而控制页面的再次加载,这边定义了

然后在需要当前页面刷新的页面中注入App.vue组件提供(provide)的 reload 依赖,然后直接用this.reload来调用就行


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 近日,济南大雨夹雪,湿气和寒气直逼室内,寝室内因而水淋淋的一片,潮湿不已。在最适合穿着拖鞋滑倒的天气,室友的确很不...
    阿黎阿黎阅读 427评论 0 1
  • 文/鱼子陌 “明天你是否会想起,昨天你写的日记,明天你是否还惦记,曾经最爱哭的你”。我想,你大概不记得这首歌了,或...
    鱼子陌阅读 457评论 0 0
  • 素材原图: 上次画了多肉虹之玉,这次画一个多肉吉娃娃。画完后和素材原图相比色差还是挺大的,立体感也有些差,部...
    江山手中画阅读 1,804评论 1 33
  • ——很多大学生的真实写照 “高三好苦啊,天天坐在教室里,刷题、背书、听老师教育。好羡慕大学生啊!放假放的早,...
    brid阅读 304评论 0 1
  • 中国现在剩男剩女有两亿人,为什么这么多,就是随着中国改革开放,男女教育平等,大学的扩招,女性得到了解放,可...
    仙人掌倔阅读 217评论 2 3