vue中在当前页面跳转当前页面，解决页面初始化数据的问题

Posted 2023-03-19

参考技术A

相信在大多数人的页面开发中，渲染页面所需的数据都是在created中进行接口调用来获取。然后呢，我在最近的开发中有这样一个需求，在菜单栏中选择进入该页面时，不论处于任何场景下，都要渲染最初的数据展示。用一句话说呢，就是在当前页面再次跳转进入当前页面，要触发我们的渲染数据的流程。

但是呢，vue-router中的特性是：只有在页面进行更新跳转后，才会重新触发我们的created,mounted生命周期。所以，要实现我们的从/routeA => /routeA，并且触发初始化的接口函数，要怎么做呢？

这种场景，常见的是我们可以刷新一下页面就会触发相应流程。但是刷新页面会有白屏，用户体验不好。所以就尝试做尽量无痕的刷新效果。vue中做无痕刷新，我是通过这篇博客学习的proviede和inject结合的方法。
=>vue 刷新当前页面或者跳转页面时候刷新

在App.vue中

在要用到刷新的组件中,

效果如下：

这种无痕刷新的弊端在于，他只是消除了手动刷新时的白屏，但是还是重新加载了图片等文件。时间较长，体验也并不好。

当时的思路是：我需要的是在我点击菜单中的漏洞查询时，改变vuex存储的数据，然后在调用漏洞查询页面的初始化函数，即可达到我需要的功能。而vue的实现方式，就是在我的父组件（写有这些公共菜单，页脚等）中，以路由的方式来调用的漏洞查询这一子组件中的页面。这不就是父子组件通信吗~ emm

然后呢，抛去event bus的通信方式，更优雅一点的就是通过ref来实现 this.$refs.Router_Son.holeList_inital();

这里需要注意的一个小细节是：Router_Son相当于子路由中的子组件（我的表述并不专业），在漏洞查询该页面时中点击菜单栏中的漏洞查询进行跳转，此时我们的子组件中包含 holeList_inital 这个函数。如果在其他页面时点击菜单栏中的漏洞查询进行跳转，此时并不包含该函数。为了减少一些报错，所以需要一个if判断。
效果如下：

因为我也是刚毕业，主要是面向百度开发，哈哈。然后当时了解到的是，还有一种思路是通过路由守卫来进行判断。 组件内的守卫有：beforeRouteEnter，beforeRouteUpdate，beforeRouteLeave ，但是对于我的这种场景并不适用。 =>路由守卫的官方文档

感谢您能看到这里，哈哈。第一次写，不足之处希望大家不吝赐教。 =

vue如何只刷新当前页面

参考技术A 我们要用到provide 和 inject ，这个不懂的人可以去搜一些。
在app.vue中

在需要刷新的页面使用