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

Question

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

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

Answer 1

一在vue-router导航守卫里做（页面切换loading）
https://router.vuejs.org/zh/g...

二在axios拦截器里做（只要发送请求就会出现loading，成功失败错误loading消失）

axios拦截器配置的其他类似
https://github.com/axios/axios