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

[veike]

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

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

[flybears]

页面之间的切换有路由前后钩子
ajax 请求也可以有前后钩子(或者自己实现)...

[melovto]

额可以参考下这个 https://www.v2ex.com/t/470059

[veike]

@flybears 我的意思是只在 main.js 或者 App.vue 中实现，不在子组件中添加任何的代码。或者说在 main.js 和 App.vue 中监听到所有子组件数据请求和 DOM 渲染的过程。不需要 vuex、mixins。
每个组件都要添加代码太麻烦。

[veike]

@melovto 这个只是路由切换 loading 效果，不包含组件中的数据请求和 DOM 渲染完成的过程。

[flybears]

@veike 是不需要在子组见中添加任何代码，路由就一个路由主文件，ajax 请求如果是 axios 的话，有自带的钩子可以去了解下....

[melovto]

@flybears 同意 确实 @veike 可以包装一下 ajax fetch 或者 axios

[leafiy]

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]

合适的时机应该是在 deactivated/activated 生命周期里开始 /结束进度条，而且在期间的其它生命周期里更新进度。
这就需要往组件多个生命周期里回调里注入逻辑。
可以代理 Vue.component，在注册组件的时候往生命周期函数里增加进度条回调。

[luoway]

@luoway 如果有应该影响进度条的 ajax，那就和生命周期无关了。合适的方法应该是分成两种进度条：生命周期进度条、异步请求进度条

[luoway]

@luoway 两种进度条可以用全局变量如 isPending 这种进行衔接，例如在生命周期进度条结束前判断一下，请求中就交给 ajax 进度条控制后续进度

[veike]

@leafiy 昨天已经实现了 没来的回复。非常感谢。

[veike]

@luoway 现在已经实现的就是异步请求的，用的是 axios 拦截器。生命周期的最后决定不做了，主要还是 request 和 response。生命周期的效果几乎感觉不到。图片加载的那种直接 loading 就行了。其他的没啥大问题。
非常感谢