V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
veike
V2EX  ›  Vue.js

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

  •  
  •   veike · 2018-07-12 08:50:56 +08:00 · 2946 次点击
    这是一个创建于 2086 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

    12 条回复    2018-07-13 09:39:58 +08:00
    flybears
        1
    flybears  
       2018-07-12 09:15:17 +08:00
    页面之间的切换有路由前后钩子
    ajax 请求也可以有前后钩子(或者自己实现)...
    melovto
        2
    melovto  
       2018-07-12 09:44:45 +08:00
    额可以参考下这个 https://www.v2ex.com/t/470059
    veike
        3
    veike  
    OP
       2018-07-12 10:00:38 +08:00
    @flybears 我的意思是只在 main.js 或者 App.vue 中实现,不在子组件中添加任何的代码。或者说在 main.js 和 App.vue 中监听到所有子组件数据请求和 DOM 渲染的过程。不需要 vuex、mixins。
    每个组件都要添加代码太麻烦。
    veike
        4
    veike  
    OP
       2018-07-12 10:03:31 +08:00
    @melovto 这个只是路由切换 loading 效果,不包含组件中的数据请求和 DOM 渲染完成的过程。
    flybears
        5
    flybears  
       2018-07-12 10:26:19 +08:00
    @veike 是不需要在子组见中添加任何代码,路由就一个路由主文件,ajax 请求如果是 axios 的话,有自带的钩子可以去了解下....
    melovto
        6
    melovto  
       2018-07-12 10:28:26 +08:00
    @flybears 同意 确实 @veike 可以包装一下 ajax fetch 或者 axios
    leafiy
        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 自由发挥吧,极简单
    luoway
        8
    luoway  
       2018-07-12 10:34:31 +08:00
    合适的时机应该是在 deactivated/activated 生命周期里开始 /结束进度条,而且在期间的其它生命周期里更新进度。
    这就需要往组件多个生命周期里回调里注入逻辑。
    可以代理 Vue.component,在注册组件的时候往生命周期函数里增加进度条回调。
    luoway
        9
    luoway  
       2018-07-12 10:37:35 +08:00   ❤️ 1
    @luoway 如果有应该影响进度条的 ajax,那就和生命周期无关了。合适的方法应该是分成两种进度条:生命周期进度条、异步请求进度条
    luoway
        10
    luoway  
       2018-07-12 10:39:55 +08:00   ❤️ 1
    @luoway 两种进度条可以用全局变量如 isPending 这种进行衔接,例如在生命周期进度条结束前判断一下,请求中就交给 ajax 进度条控制后续进度
    veike
        11
    veike  
    OP
       2018-07-13 09:31:02 +08:00
    @leafiy 昨天已经实现了 没来的回复。非常感谢。
    veike
        12
    veike  
    OP
       2018-07-13 09:39:58 +08:00
    @luoway 现在已经实现的就是异步请求的,用的是 axios 拦截器。生命周期的最后决定不做了,主要还是 request 和 response。生命周期的效果几乎感觉不到。图片加载的那种直接 loading 就行了。其他的没啥大问题。
    非常感谢
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   1185 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 23:10 · PVG 07:10 · LAX 16:10 · JFK 19:10
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.