请教一个关于异步组件的问题

这段关于异步组件处理加载状态的表述,我写了一直没有效果,请问各位大神有用过这个配置并生效了的吗?

贴代码,你代码肯定错了。动态载入组件没有问题

image

大概就是这样子的,请问哪里写错了呢?请指教,谢谢

说实话看不懂你写的
components: {
‘my-component’: () => import(’./my-async-component’)
}
直接动态载入不行吗?你的代码和官方例子也不完全一样。

你的代码看起来没什么问题。除了 loading 组件直接配置给 route component 选项时不会渲染出来。

请问大神,怎么才能让loading配置生效呢?

提供给 component 选项的是一个普通组件(作为代理/容器组件),然后把带 loading/error 配置的异步组件注入进去作为子组件。也就是 router 只会看到容器组件(同步异步皆可),复杂的异步组件以子组件的形式交给容器组件处理。

哦,你的意思就是把loading配置以组件的形式实现。

然后,没法通过那种配置的方式实现了吗?

Vue Router 有自己的一套生命周期系统,与 Vue 的异步组件在一定程度上是冲突的。从结果上来说 loading 组件没有渲染的时机。

写了个例子:

好的,谢谢。

那Vue的文档中说要在Vue Router 2.4.0+才支持这种语法,其实也是不支持的,是吗?

「支持这种语法」是说你传入这样一个数据它能正确解析并利用(不然连视图组件都渲染不出来了),并没有保证工作效果与普通组件场景完全一样。

其中的缘由可参考英文版的这个帖子。简单地说,Vue Router 的生命周期(或者导航流程,按你方便理解的来)包括一个组件内守卫的执行过程,在这个守卫执行完成前,这一次导航实际上是没有被确认 (resolve) 的。而如果使用了异步组件会怎样?异步组件没下载完成,Vue 没法执行组件内守卫,这就带来了一个微妙的时机问题:导航被 resolve 时,异步组件本体已经下载完了,直接渲染即可,没有 loading 组件的出场机会了。

那为什么在下载异步组件本体时不渲染 loading 组件?因为这样在业务上会与导航状态相冲突。loading 组件的本意是异步组件未就绪时的渲染占位符,它表达的含义是「业务还在进行,但是渲染业务内容的家伙还没赶过来,你先看会儿广告」。而在导航被 resolve 之前相关业务应当是未开始的状态(比如没有权限的场景),这就与 loading 组件的业务含义产生了矛盾。

Vue Router(或 Vue)的文档应当说明一下这个事儿(多处提问和 Issue 也都提到了这点),但看来他们没得空更新。:joy:

1 Like