在加载延迟加载的路线组件时如何显示“加载”动画？

我已经使用webpack的代码拆分功能将我的应用程序拆分为多个块，以便在用户访问我的网页时不会下载整个应用程序包。

一些路由所需的块可能相当大，并且可能需要花费大量时间才能下载。很好，除非用户单击内部链接时不知道页面实际上正在加载，所以我需要以某种方式显示加载动画或其他内容。

我的路由器配置如下：

[
  {
    path: '/',
    component: () => import(/* webpackChunkName: 'landing' */ './landing.vue'),
  },
  {
    path: '/foo',
    component: () => import(/* webpackChunkName: 'main' */ './foo.vue'),
  },
  {
    path: '/bar',
    component: () => import(/* webpackChunkName: 'main' */ './bar.vue'),
  },
]

Vue.js指南中的“ 高级异步组件 ”展示了如何在解析组件时显示特定的“正在加载”组件-这正是我所需要的，但是它也说：

请注意，在vue-router中用作路由组件时，这些属性将被忽略，因为异步组件是在路由导航发生之前预先解析的。

如何在vue-router中实现此目标？如果这不可能，那么延迟加载的组件对我来说将几乎没有用，因为这会给用户带来糟糕的体验。