请教, vue SPA 网站如何实现全局页面加载进度条?

2018-07-12 08:50:56 +08:00
 veike

首先说明一下想实现的效果。 只需要在 main.js 或者 App.vue 中实现,不用每个子组件都添加页面加载完成的代码。加载进度条到 100%的时候,一定是数据加载渲染完成后。 现在主要难点是:如何在 main.js 、App.vue 中获知子组件数据请求渲染完成。

传统的网站,DOMContentLoaded 和 onload 可以分别得知,dom 加载解析完成和所有的文件下载完成。从而很容易模拟一个页面加载进度条。 但是 SPA 网站加载过程从 第一次进入页面:DOMContentLoaded,onload,ajax 请求数据,渲染数据。路由切换:ajax 请求数据、渲染数据。 求高手解答。或者一起讨论下也行。不想在每个页面都要添加一个 loaded 的代码。很麻烦。

3103 次点击
所在节点    Vue.js
12 条回复
flybears
2018-07-12 09:15:17 +08:00
页面之间的切换有路由前后钩子
ajax 请求也可以有前后钩子(或者自己实现)...
melovto
2018-07-12 09:44:45 +08:00
额可以参考下这个 https://www.v2ex.com/t/470059
veike
2018-07-12 10:00:38 +08:00
@flybears 我的意思是只在 main.js 或者 App.vue 中实现,不在子组件中添加任何的代码。或者说在 main.js 和 App.vue 中监听到所有子组件数据请求和 DOM 渲染的过程。不需要 vuex、mixins。
每个组件都要添加代码太麻烦。
veike
2018-07-12 10:03:31 +08:00
@melovto 这个只是路由切换 loading 效果,不包含组件中的数据请求和 DOM 渲染完成的过程。
flybears
2018-07-12 10:26:19 +08:00
@veike 是不需要在子组见中添加任何代码,路由就一个路由主文件,ajax 请求如果是 axios 的话,有自带的钩子可以去了解下....
melovto
2018-07-12 10:28:26 +08:00
@flybears 同意 确实 @veike 可以包装一下 ajax fetch 或者 axios
leafiy
2018-07-12 10:29:54 +08:00
axios

axiosInstance.interceptors.[request/response].use(
conf => {
eventHub.$emit("event name",自由发挥);
return conf;
},
error => {
eventHub.$emit("event name",自由发挥);
return Promise.reject(error);
}
);

做个 loading 组件$on 自由发挥吧,极简单
luoway
2018-07-12 10:34:31 +08:00
合适的时机应该是在 deactivated/activated 生命周期里开始 /结束进度条,而且在期间的其它生命周期里更新进度。
这就需要往组件多个生命周期里回调里注入逻辑。
可以代理 Vue.component,在注册组件的时候往生命周期函数里增加进度条回调。
luoway
2018-07-12 10:37:35 +08:00
@luoway 如果有应该影响进度条的 ajax,那就和生命周期无关了。合适的方法应该是分成两种进度条:生命周期进度条、异步请求进度条
luoway
2018-07-12 10:39:55 +08:00
@luoway 两种进度条可以用全局变量如 isPending 这种进行衔接,例如在生命周期进度条结束前判断一下,请求中就交给 ajax 进度条控制后续进度
veike
2018-07-13 09:31:02 +08:00
@leafiy 昨天已经实现了 没来的回复。非常感谢。
veike
2018-07-13 09:39:58 +08:00
@luoway 现在已经实现的就是异步请求的,用的是 axios 拦截器。生命周期的最后决定不做了,主要还是 request 和 response。生命周期的效果几乎感觉不到。图片加载的那种直接 loading 就行了。其他的没啥大问题。
非常感谢

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/470070

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX