vue.js实现刷新当前页面的方法教程
前言
Vue.js（是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，是一种数据驱动的前端框架
我们在开发vue的页面的时候，有时候会遇到需要刷新当前页面功能，但是vue框架自带的router是不支持刷新当前页面功能的，它只支持在路由路径变化时刷新页面。基于这个原理，为了实现刷新页面，可以先跳转到一个空页面，然后马上跳回来，从而实现这个功能。
开发工具环境
- vue.js
- webstorm
方法如下
一、原理
如上图所示，我们需要为要刷新的页面A编写一个自动跳回的空页面，当用户操作了A页面后，A页面先跳转到空页面，然后空页面马上跳回A页面，这时候vue会去重新加载A页面。这种方法可以变相实现自我刷新，缺点是当需要刷新的页面较多时，空页面也会随之变多。
二、当前页面事件监听
如上图所示，我们定义了refreshPage方法，这个方法是对特定事件的回调，在这个方法会处理业务逻辑，然后在最后使用vue的router跳转到一个空页面，这个空页面路由路径是/user/back，这个路径是随便取的，大家可以选择自己的路径
三、空页面的编写
如上图所示，在空页面中立即执行路由，跳回原来的页面，这时候原来的页面会进行重新加载，从而实现了刷新。这里的/user/index就是跳回原来页面的路由路径，大家需要根据自己的项目情况写。
四、注意事项
本文所使用的方法，其实是一种hack方法，在极端情况下，比如网络极端恶劣，那么可能出现跳到空页面后跳不会来，或者干脆跳不到空页面的情况，大家需要根据自己的项目情况酌情选择。
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对脚本之家的支持。
相关文章
本篇文章主要介绍了vue+axios+mock.js环境搭建的方法步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
这篇文章主要给大家介绍了关于Vue 3.x+axios跨域方案的踩坑指南，文中通过示例代码介绍的非常详细，对大家学习或者使用Vue 3.x具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-07-07
这篇文章主要介绍了vite项目如何从0开始配置eslint问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要为大家介绍了vue 指令版富文本溢出省略截取示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
最近在用VUE写大屏页面,遇到屏幕自适应问题,下面这篇文章主要给大家介绍了关于vue大屏自适应的实现方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-06-06
这篇文章主要介绍了vue 监听窗口变化对页面部分元素重新渲染操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
这篇文章主要介绍了vue + element-ui的分页问题实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
这篇文章主要介绍了Vue项目判断开发、测试、正式环境过程，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了学习 Vue.js 遇到的那些坑，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下2021-02-02
vue项目中字符串换行显示方式(返回的数据包含‘\r\n’字符)
这篇文章主要介绍了vue项目中字符串换行显示方式(返回的数据包含‘\r\n’字符)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
最新评论