vue项目如何刷新当前页面「建议收藏」

vue项目如何刷新当前页面「建议收藏」想必大家在刨坑vue的时候也遇到过下面情形:比如在删除或者增加一条记录的时候希望当前页面可以重新刷新或者如下面这种:如果希望点击确定的时候,Dialog对话框关闭的时候,当前http://localhost:9530/#/supplier/supplierAll页面可以重新刷新下那么表格的数据可以重新加载,Dialog对话框设置的数据可以在确定后刷新出现在页面上这时候我们最直接的思维就是想到下…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

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

vue项目如何刷新当前页面「建议收藏」

如果希望点击确定的时候,Dialog 对话框关闭的时候,当前http://localhost:9530/#/supplier/supplierAll页面可以重新刷新下

那么表格的数据可以重新加载,Dialog 对话框设置的数据可以在确定后刷新出现在页面上

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

vue项目如何刷新当前页面「建议收藏」

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

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

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

vue项目如何刷新当前页面「建议收藏」

location.
reload()
this.
$router.
go(
0)

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

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

vue项目如何刷新当前页面「建议收藏」

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

vue项目如何刷新当前页面「建议收藏」

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

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

vue项目如何刷新当前页面「建议收藏」

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

isRouterAlive //true or false 来控制

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

vue项目如何刷新当前页面「建议收藏」

至此,三种方式都介绍完了,如果对你有帮助记得给个赞哈~

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/157833.html原文链接:https://javaforall.net

赞 (0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 画用例图_uml活动图怎么画

    画用例图_uml活动图怎么画用例图。组成:系统边界。参与者。用例。关系。参与者:Actor不是人,而是指参与用例时担当的角色。如果一个角色的操作是由另一个角色代理完成的,请建立该角色到另外角色之间的依赖。怎样识别参与者呢? 是谁向系统提供的信息呢. 谁向系统获取信息。 谁操作系统。 系统使用哪些外部资源 系统是否和已经存在的系统交互 系统、子系统或类与外…

    2022年9月6日
  • perl json encode_json decode_json

    perl json encode_json decode_jsonuse之后使用encode_json命令即可将perl的array或者dic转换为标准的JSON字符串了:jrhmpt01:/root/wx#catjson.pluseJSONqw/encode_jsondecode_json/;my$data=[{‘name’=>’Ken’,’age’=>19},

    2022年7月17日
  • 各类加载loading动画效果

    各类加载loading动画效果效果一: 一、HTMLLoading…二、CSS/*绿色背景*/body{   background:#4ea980;   margin:50px;}/*纯白色圈*/.loader{   text-indent:-9999em;   position:relative;   width:200px;   height:20

    2022年4月19日
  • Access denied for user ‘root‘@‘localhost‘问题的解决「建议收藏」

    Access denied for user ‘root‘@‘localhost‘问题的解决「建议收藏」问题场景在阿里云上部署了一台服务器,CentOS6.8系统环境,安装了MySql+Nginx+Git+vsftpd等软件,在本地Linux终端以非root账户SSH远程登录服务器,在将项目打包发布时遇到如题所示问题。代码中配置文件里的用户名不是“root”,密码正确,且该用户名和密码是配置在服务端数据库的用户表中的。但是在用浏览器调用跟数据库交互接口时出错:尝试解决网上搜了一堆文章,主要集中在(1…

    2022年10月28日
  • SpringBoot集成Redis并实现主从架构「建议收藏」

    SpringBoot集成Redis并实现主从架构「建议收藏」hello,你好呀,我是灰小猿,一个超会写bug的程序猿!今天这篇文章来和大家分享一下在springboot中如何集成redis,并实现主从架构,进行数据的简单存储。我的Redis是部署在Windows系统下面的,所以在这里附上Redis在Windows环境下的安装地址和安装说明。一、Windows环境下安装Redis首先去官网下载Redis的安装包,官方下载地址:https://github.com/tporadowski/redis/releases在其中选择当前版本即可。下载之后解压

    2022年9月16日
  • 如何读取npy文件_mfc设置保存文件的类型

    如何读取npy文件_mfc设置保存文件的类型npy文件既可以保存数据也可以保存数据集(包括图片)下面只说保存简单数据实例:使用npy文件保存g_D_loss的数据,g_D_loss是一个元组,已经存入数据。withopen(‘./g_D_loss.npy’,’wb’)asf:np.save(f,g_D_loss)读取:file=”./g_D_loss.npy”…

    2022年11月1日

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号