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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • pycharm怎么编译python_python需要编译器吗

    pycharm怎么编译python_python需要编译器吗PyCharm编译器有很强大的代码提示功能,业界都说很好用,所以我尝试着安装并使用,以下是过程。下载地址:http://www.jetbrains.com/pycharm/download/#section=windows安装完成之后需要激活我选择的是Licenceserver,然后输入一下的链接http://idea.imsxm.com/即可激活,亲测可用,若果失效了那就…

    2025年6月17日
    0
  • eclispe中创建maven项目使用spring报java.lang.ClassNotFoundException: org.springframework.web.filter.Charact「建议收藏」

    eclispe中创建maven项目使用spring报java.lang.ClassNotFoundException: org.springframework.web.filter.Charact「建议收藏」报错如下:信息: Starting Servlet Engine: Apache Tomcat/7.0.57九月 24, 2018 6:44:04 下午 org.apache.catalina.util.SessionIdGenerator createSecureRandom信息: Creation of SecureRandom instance for session ID gen…

    2022年6月13日
    40
  • __setattr__,setattr(),getattr__,getattr()及__getattribute__的区别

    __setattr__,setattr(),getattr__,getattr()及__getattribute__的区别Python2.7IDEPycharm5.0.3首先,给一波定义__setattr__(self,name,value)#当试图给特性name赋值时候自动被调用,其余方法同理#相当于触发机制__getattribute__(self,item)#每次通过实例化访问属性都会通过该函数#如果没有该属性,则访问完该函数后,再会通过__getattr__函数_setattr_和_get

    2025年6月23日
    1
  • 视频编码器mpeg4_mpeg1234是什么格式

    视频编码器mpeg4_mpeg1234是什么格式来自http://blog.csdn.net/dansin/article/details/389149MPEG-4编解码学习.1.视频数据编码的办法对数据进行编码的目的前面以前提过,一方面降低数据体积,一方面保留数据携带的信息量..对于视频数据,我们要做的将是降低数据何积和保证数据解码后的视觉效果.视频数据编码一般有三个方法:a.去除时间冗余度(时间冗余度是指视频数据在各帧之

    2022年9月18日
    0
  • simulink实现模糊PID控制[通俗易懂]

    simulink实现模糊PID控制[通俗易懂]simulink实现模糊PID控制模糊系统,建立simulink实现主程序设计。

    2022年5月22日
    39
  • apache工具包_apache怎么安装

    apache工具包_apache怎么安装前言以下是在自己的腾讯云vps(ubuntu16.04)操作,通过oneinstack安装lamp的,本文通过apxs安装mod_proxy.so模块。正文apxs是apache管理模块的工具,它做的是将mod.c生成mod.so,并使其能被apache加载,使用apxs的前提:mod_so已被加载+查看相关信息##注:以下httpd路径以自己服务器为准##查看是否加载

    2022年9月15日
    0

发表回复

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

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