相关疑难解决方法(0)

我已经使用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中实现这一点？如果这是不可能的,延迟加载的组件对我来说几乎没用,因为它会给用户带来糟糕的体验.

我一直在尝试在 vue 2 中的每个路由器更改上显示一个微调器。我在创建的方法中添加了一个标志来显示初始加载，一段时间后我停止了加载微调器。这根本行不通。

还有其他解决方案可以实现这一目标吗？

提前致谢。