这是一个创建于 2327 天前的主题，其中的信息可能已经有所发展或是发生改变。
首先说明一下想实现的效果。 只需要在 main.js 或者 App.vue 中实现，不用每个子组件都添加页面加载完成的代码。加载进度条到 100%的时候，一定是数据加载渲染完成后。 现在主要难点是：如何在 main.js 、App.vue 中获知子组件数据请求渲染完成。
传统的网站，DOMContentLoaded 和 onload 可以分别得知，dom 加载解析完成和所有的文件下载完成。从而很容易模拟一个页面加载进度条。 但是 SPA 网站加载过程从 第一次进入页面：DOMContentLoaded，onload，ajax 请求数据，渲染数据。路由切换：ajax 请求数据、渲染数据。 求高手解答。或者一起讨论下也行。不想在每个页面都要添加一个 loaded 的代码。很麻烦。
 |
1
flybears 2018-07-12 09:15:17 +08:00
页面之间的切换有路由前后钩子
ajax 请求也可以有前后钩子(或者自己实现)... |
 |
2
melovto 2018-07-12 09:44:45 +08:00
额可以参考下这个 https://www.v2ex.com/t/470059
|
 |
3
veike OP @flybears 我的意思是只在 main.js 或者 App.vue 中实现，不在子组件中添加任何的代码。或者说在 main.js 和 App.vue 中监听到所有子组件数据请求和 DOM 渲染的过程。不需要 vuex、mixins。
每个组件都要添加代码太麻烦。 |
|
5
flybears 2018-07-12 10:26:19 +08:00
@veike 是不需要在子组见中添加任何代码，路由就一个路由主文件，ajax 请求如果是 axios 的话，有自带的钩子可以去了解下....
|
 |
7
leafiy 2018-07-12 10:29:54 +08:00  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 2018-07-12 10:34:31 +08:00
合适的时机应该是在 deactivated/activated 生命周期里开始 /结束进度条，而且在期间的其它生命周期里更新进度。
这就需要往组件多个生命周期里回调里注入逻辑。 可以代理 Vue.component，在注册组件的时候往生命周期函数里增加进度条回调。 |
|
9
luoway 2018-07-12 10:37:35 +08:00 1
@luoway 如果有应该影响进度条的 ajax，那就和生命周期无关了。合适的方法应该是分成两种进度条：生命周期进度条、异步请求进度条
|
Select Language