Vue3从另一个视图延迟加载视图?

Question

是否可以从另一个视图延迟加载?例如，如果用户在/auth上，当用户填写一些输入时，它应该延迟加载Fillout组件，当用户完成后，从auth推送到Fillout的路由。

这有点牵强，因为我在文档中没有找到任何关于这方面的内容。这对我来说是有意义的，这样的东西应该存在，因为使用块加载一次?我看错了吗?

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/fillout',
    name: 'Fillout',
    component: () => import('../views/Fillout.vue')
  },
  {
    path: '/auth',
    name: 'Auth',
    component: () => import('../views/Auth.vue')
  }
]

谢谢你。

Answer 1

正如在注释中讨论的那样，只需在组件中编写一个方法来预取想要延迟加载的组件。

const prefetch = () => import('@/path/to/MyComponent');

然后调用该方法，当你考虑，即，当用户填写了一些强制性的输入或表单是有效的，…

这个方法调用将导致HTTP请求加载必要的块，因此，当你导航到所需的路由时，组件实际上是被获取的，并且没有额外的HTTP请求。