首先说明一下想实现的效果。 只需要在 main.js 或者 App.vue 中实现，不用每个子组件都添加页面加载完成的代码。加载进度条到 100%的时候，一定是数据加载渲染完成后。 现在主要难点是：如何在 main.js 、App.vue 中获知子组件数据请求渲染完成。
传统的网站，DOMContentLoaded 和 onload 可以分别得知，dom 加载解析完成和所有的文件下载完成。从而很容易模拟一个页面加载进度条。 但是 SPA 网站加载过程从 第一次进入页面：DOMContentLoaded，onload，ajax 请求数据，渲染数据。路由切换：ajax 请求数据、渲染数据。 求高手解答。或者一起讨论下也行。不想在每个页面都要添加一个 loaded 的代码。很麻烦。
 |
1
flybears Jul 12, 2018
页面之间的切换有路由前后钩子
ajax 请求也可以有前后钩子(或者自己实现)... |
 |
2
melovto Jul 12, 2018
额可以参考下这个 https://www.v2ex.com/t/470059
|
 |
3
veike OP @flybears 我的意思是只在 main.js 或者 App.vue 中实现，不在子组件中添加任何的代码。或者说在 main.js 和 App.vue 中监听到所有子组件数据请求和 DOM 渲染的过程。不需要 vuex、mixins。
每个组件都要添加代码太麻烦。 |
 |
7
leafiy Jul 12, 2018  1
axios
axiosInstance.interceptors.[request/response].use( conf => { eventHub.$emit("event name",自由发挥); return conf; }, error => { eventHub.$emit("event name",自由发挥); return Promise.reject(error); } ); 做个 loading 组件$on 自由发挥吧，极简单 |
 |
8
luoway Jul 12, 2018
合适的时机应该是在 deactivated/activated 生命周期里开始 /结束进度条，而且在期间的其它生命周期里更新进度。
这就需要往组件多个生命周期里回调里注入逻辑。 可以代理 Vue.component，在注册组件的时候往生命周期函数里增加进度条回调。 |
Select Language