关于vue的页面跳转后,如何每次进入页面时都能获取后台数据

摘要:
在vue的页面跳转后,如何在每次进入页面时获取后台数据watch+mouted。一般来说,我们将在vue的创建生命周期中实现它,并向后台发送请求以获取数据。创建的事件显然无法实现。然后A通过路线跳到B。此时,B被创建并触发一系列生命周期,包括创建。在问题开始时,用户通过页面B的路线跳回到A,而A没有创建触发器!
关于vue的页面跳转后,如何每次进入页面时都能获取后台数据

watch+mouted

首先说问题。

一.页面的数据来自后台,即会发起请求从后台取值。

二.子组件的数据刷新的问题,即每次进入父组件的时候,其相关子组件的数据需要重新从后台取值。

1.答:

关于第一个问题。一般来讲我们会在vue的created的生命周期中实现,向后台发起请求获取数据。

但是这样会带来一个问题。

1.1.我需要每次进入页面的时候都从后台获取数据!

而created事件很明显是不能实现的。

        稍微解释下

        首先理解单页面应用,个人理解,最后的vue项目打完包后只有一个index.html。说明单页面应用就是字面上的意思,只有一个页面的应用!

        那么页面跳转是什么?借助路由模拟页面跳转。

情景描述:单页面应用中假设现有A、B两个页面,用户进入页面首先进入A页面,此时A创建,触发一系列生命周期包括created。再由A经路由跳到B,此时B创建,触发一系列生命周期包括created。用户操作到这一步都没有任何问题。

       问题开始,用户从B页面经过路由跳回A,此时A不会触发created!因为已经触发过了!所以A不会向后台发起请求获取数据。同样,当再次从A跳到B时,B也不会经过created。

       一般来讲,这种情况属于正常的,但是,如果A、B的数据来源必须经过后台请求,即从A跳往B的时候,实际上提交了与B相关的数据到了后台,然后后台处理后与B页面之前的数据不同!此时如果B页面没有从后台请求数据,必然是错误的!

解决方案:我个人的解决方案。

        监听路由,在需要每次进入都要从后台获取新数据的页面例如B页面,监听路由的变化

        关于vue的页面跳转后,如何每次进入页面时都能获取后台数据第1张

       init方法即为每次进入此页面都需要执行的方法,请求数据的方法也在里面。

2.答:

关于第二个问题。一般来讲子组件的数据来源有两种。

2.1由父组件传入子组件:

     这种情况使用第一个问题的解决方案后,在init方法中加载出子组件需要的数据再传入子组件即可解决。

2.2由子组件自己向后台发起请求获取最新数据:

      这种情况,有点类似第一个问题,子组件需要有一个init方法,而不是将获取数据的方法直接写在created中,应该在created中调用init。父组件的init方法中,调用子组件的init方法。

父组件:

关于vue的页面跳转后,如何每次进入页面时都能获取后台数据第2张

关于vue的页面跳转后,如何每次进入页面时都能获取后台数据第3张

      关于vue的页面跳转后,如何每次进入页面时都能获取后台数据第4张

子组件:

      关于vue的页面跳转后,如何每次进入页面时都能获取后台数据第5张

以上为个人解决方案,

如果各位看到的朋友有更好的想法,望请指点。有其他的方案也希望能讨论讨论。

免责声明:文章转载自《关于vue的页面跳转后,如何每次进入页面时都能获取后台数据》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇eclipse下搭建shell脚本编辑器--安装开发shell的eclipse插件shelledJava8 stream分组按某字段取最大值下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

Qt编写的项目作品6-可视化大屏电子看板系统

一、功能特点 整体总共分三级界面,一级界面是整体布局,二级界面是单个功能模块,三级界面是单个控件。 子控件包括饼图+圆环图+曲线图+柱状图+柱状分组图+横向柱状图+横向柱状分组图+合格率控件+百分比控件+进度控件+设备状态面板+表格数据+地图控件(包括动态闪烁点+迁徙图等)+视频控件+其他控件等。 二级界面可以自由拖动悬浮,支持最小化最大化关闭,响应双击...

把sql server 数据库中数据导出至excel表

https://blog.csdn.net/weixin_42596182/article/details/90750187 打开数据库后选择需要导出数据的数据库,比如本次为db_PMMS,右键选择“任务”–“导出数据”,点击下一步。 进入“选择数据源”窗口。“数据源”选择sql server native client 10.0,然后选择服务器和数据...

vue项目中在同一页面多次引入同一个echarts图表子组件的自适应问题

 在父组件页面引入两次该图表子组件显示的效果:       由于是百分比宽高,所以在窗口发生变化时,需要让图表也跟着自适应,所以才出现了本次讨论的问题啦。  先看下完整的图表子组件代码(在父组件就是直接引入,不需要传参哦): <template> <div ref="pieDom" style=" 100%;height: 10...

wordpress数据库优化wp_posts表 OPTIMIZE

wordpress数据库优化wp_posts表 对 MySQL 数据记录进行插入、更新或删除时,会占有不同大小的空间,记录就会变成碎片,且留下空闲的空间。就像具有碎片的磁盘,会降低性能,需要整理,因此要优化。 OPTIMIZE TABLE wp_posts;  参考自我爱水煮鱼...

NCBI SRA数据如何进行md5校验?

下了一些sra数据库中的公共数据,因为pretech和aspera不稳定,稍微大点的文件经常传断,部分文件我只能通过本地下载再上传。 那么问题来了,sra没有md5校验,我怎么知道我数据的完整性,尤其是通过本地下载的那些数据? 网上查了下是说,sra是自带md5校验的(The SRA archive format ("vdb") contains an m...

循序渐进VUE+Element 前端应用开发(19)--- 后端查询接口和Vue前端的整合

循序渐进VUE+Element 前端应用开发的系列文章中,前面介绍了系统各个功能的处理实现,本篇随笔从一个主线上介绍前后端开发的整合,让我们从ABP框架后端的查询接口的处理,前端API接口调用的封装,以及前端Element界面的整个调用过程进行一个完整的介绍。 我们前面介绍了Vue+Element前端的接口是调用后端的ABP框架发布的API接口服务,API...