当前位置: 首页 > 编程笔记 >

vue项目刷新当前页面的三种方法

刘星火
2023-03-14
本文向大家介绍vue项目刷新当前页面的三种方法,包括了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来调用就行

总结

以上所述是小编给大家介绍的vue项目刷新当前页面的三种方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对小牛知识库网站的支持!

 类似资料:
  • 问题内容: 如何强制Web浏览器通过JavaScript硬刷新页面? 硬刷新意味着获取页面的新副本并刷新所有外部资源(图像,JavaScript,CSS等)。 问题答案: 尝试使用: 当此方法接收一个值作为参数时,它将导致该页面始终从服务器重新加载。如果为false或未指定,浏览器 可能会 从其缓存中重新加载页面。

  • uniapp项目如何监听页面刷新

  • 如题: 刷新页面之后有概率 #/ 之后的地址消失, 1.token 保活没问题,token 过期的提示都在 2.和缓存无关,clear site data 之后刷新页面,提示 无token 3.没有除外 JS 代码的重定向,debugger 开了也没用 4.概率性出现,无痕浏览器里面也不影响 5.和单个电脑无关,多台电脑都能复现 复现条件: 1.单个账号登录 1H+ 无操作,可以提升触发 BUG

  • 本文向大家介绍vue单页面实现当前页面刷新或跳转时提示保存,包括了vue单页面实现当前页面刷新或跳转时提示保存的使用技巧和注意事项,需要的朋友参考一下 前言 最近公司vue项目中有一个需求,需要在当前页面刷新或跳转时提示保存并可取消刷新,以防止填写的表单内容丢失。刚开始思考觉得很简单,直接在Router的钩子中判断就好了,但是会发现还有新的问题存在,浏览器刷新和当前页面关闭的时候无法监听,最终用w

  • 本文向大家介绍javascript刷新父页面的各种方法汇总,包括了javascript刷新父页面的各种方法汇总的使用技巧和注意事项,需要的朋友参考一下 用iframe、弹出子页面刷新父页面iframe 弹出子页面 子窗口刷新父窗口 刷新以open()方法打开的窗口 刷新以winodw.showModelDialog()方法打开的窗口

  • 成功登录验证后,我需要刷新主页。在这里,我使用下面的代码在成功登录后移动到下一页,并使用Firebase作为后端。 它只是打开主页而没有刷新。欢迎,如果有人能给我一个解决方案。