工作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来调用就行

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

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

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

相关文章

linux文件系统叫什么,【整理】什么是根文件系统(rootfs=Root Fils System)

Linux系统中的根文件系统,Root FileSystem,简称为rootfs;关于rootfs,之前一直很迷惑,不知道所要表达的真正的含义;即便是通过buildroot自己建立了相关的rootfs之后,还是没能很明白的理解&#x…

工作89:vue竖直的显示表头的表格(vue版本)

今天遇到一个问题&#xff0c;实现这样一个竖直的显示表头的表格&#xff0c;如下图。默认显示两列。 vue实现代码如下&#xff1a; tableComponent.vue&#xff1a; <template> <table class"mailTable" :style"styleObject" v-if"s_show…

【python之路】数据库2

一、数据库存储引擎 1.什么是存储引擎 mysql中建立的库>文件夹 库中建立的表>文件  现实生活中我们用来存储数据的文件应该有不同的类型&#xff1a;比如存文本用txt类型&#xff0c;存表格用excel&#xff0c;存图片用png等 数据库中的表也应该有不同的类型&#xff0c…

linux服务器配置端口,Linux服务器配置-新增端口

1、我们需要知道操作的Apache配置文件在Linux服务器上面的路径&#xff1a;/etc/apache2/&#xff0c;用cd命令即可&#xff1a;cd /etc/apache2/在服务器上&#xff0c;我们通过ls命令查看配置文件&#xff1a;2、需要用到的是设置端口的文件ports.conf 以及sites-enabled目录…

3224: Tyvj 1728 普通平衡树

3224: Tyvj 1728 普通平衡树 Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 14480 Solved: 6275Description 您需要写一种数据结构&#xff08;可参考题目标题&#xff09;&#xff0c;来维护一些数&#xff0c;其中需要提供以下操作&#xff1a;1. 插入x数2. 删除x数(若有…

linux编译c++ 静态库,C/C++ 条件编译静态库

》windows 下方法&#xff1a;1.方法一&#xff1a;VS工程中中直接添加1.1在VS的属性-》常规-》附加库目录&#xff0c;添上文件夹的路径:例如&#xff1a;lib/x64&#xff1b;1.2输入的附加依赖项&#xff0c;添加上库的名字&#xff0c;例如&#xff1a;dmapi.lib1.3 对用到该…

[BZOJ 2654]tree(陈立杰)

Description 给你一个无向带权连通图&#xff0c;每条边是黑色或白色。让你求一棵最小权的恰好有need条白色边的生成树。题目保证有解。Input 第一行V,E,need分别表示点数&#xff0c;边数和需要的白色边数。接下来E行,每行s,t,c,col表示这边的端点(点从0开始标号)&#xff0c;…

DM3软件如何在linux中安装,DM3 文件扩展名: 它是什么以及如何打开它?

DM3 疑难解答频繁的 DM3 打开问题ImageJ 不存在你尝试加载 DM3 文件并收到错误&#xff0c;例如 “%%os%% 无法打开 DM3 文件扩展名”。 通常&#xff0c;%%os%% 中会出现这种情况&#xff0c;因为 ImageJ 未安装在你的电脑上。 你将无法双击以打开 DM3&#xff0c;因为你的操作…

CentOS6.8下安装memcached并设置开机自启动

参考资料&#xff1a;http://www.cnblogs.com/handongyu/p/6419305.html http://coolnull.com/1986.html 一、安装libevent 首先检查系统中是否安装了libevent [rootyeebian ~]# rpm -qa | grep libevent 如果安装了则查看libevent的安装路径&#xff0c;后续安装时需要用到 […

ftp 530 linux,Linux启动ftp服务器530 Permission denied解决方法

重新在虚拟机下安装了linux。现在我想启动linux自带的ftp服务器&#xff1a;#service vsftpd start 。如果想linux启动是自动启动ftp服务器&#xff1a;#chkconfig vsftpd on 。运行putty&#xff0c;以root身份进入&#xff0c;出现了报错 530 Permission denied &…

Shiro身份认证授权原理

shiro在应用程序中的使用是用Subject为入口的&#xff0c; 最终subject委托给真正的管理者ShiroSecurityMannager Realm是Shiro获得身份认证信息和来源信息的地方(所以这里是我们实现的)我们只要继承他的实现类重写方法就好了&#xff0c;AuthorizingRealm 身份认证过程 自定义…

linux进程路由策略,linux路由表,策略路由,路由查找

路由表内核中路由表有2种&#xff1a;l 一个是缓存路由(fib)&#xff0c;是自动学习生成自动管理的&#xff0c;用户没必要去干预&#xff0c;但是内核还是提供了方法让用户可以去清空它。但是用户不能设置它的项&#xff0c;但是可以根据这个缓存更新的原理从外部影响他。l 路…

图形桌面linux触摸,新手看招:用图形桌面访问Linux操作系统

创建用户帐户&#xff1a;adduser login-name (OS:Red Hat)useradd login-name (OS:SuSe)为帐户添加密码&#xff1a;passwd login-name (密码应该包括一个数字&#xff0c;且不能为英文单词)结束登录程序&#xff0c;启动另一登录实例&#xff1a;CtrlD从终端启动图形窗口环境…

Python namedtuple(命名元组)使用实例

Python namedtuple(命名元组)使用实例 #!/usr/bin/python3import collectionsMyTupleClass collections.namedtuple(MyTupleClass,[name, age, job]) obj MyTupleClass("Tomsom",12,Cooker) print(obj.name) print(obj.age) print(obj.job)执行结果&#xff1a; To…

pd怎么卸载linux系统,parallels desktop11怎么卸载?parallels desktop11卸载方法

parallels desktop11是一款功能强大的MAC虚拟机软件&#xff0c;用户通过该软件可在mac系统下运行安装windows或Linux操作系统&#xff0c;不过很多时候用户在安装后&#xff0c;由于后期没有使用虚拟机的需求&#xff0c;故此想要将其删除&#xff0c;但是又不知道如何操作&am…

html5中使页面中元素居中

在div中加入 style"text-align: center;

linux下jdk源码安装,Linux JDK 源码安装

一 环境1.1 操作系统[roothost-xxxsoft]# lsb_release -aLSB Version: :base-4.0-amd64:base-4.0-noarch:core-4.0-amd64:core-4.0-noarch:graphics-4.0-amd64:graphics-4.0-noarch:printing-4.0-amd64:printing-4.0-noarchDistributor ID: CentOSDescription: CentOS re…