vue.js - 如何在 VueRouter@4.0.0 (Vue3) 中使用 createAsyncComponent？

Question

当我这样填写component字段时createRouter()：

{
    path: '/article/post',
    name: 'article-post',
    component: defineAsyncComponent({
      loader: () => import('@/views/article-post/index.vue'),
      loadingComponent: () => import('@/views/article-post/skeleton.vue'),
    }),
},

好像它不起作用。我希望它在实际页面加载时显示加载页面。

我怎么做？

Answer 1

该loadingComponent值必须是组件定义，并且本身不能是异步组件：

import { createRouter } from 'vue-router'
import { defineAsyncComponent } from 'vue'
import Skeleton from '@/views/article-post/skeleton.vue'

export default createRouter({
  routes: [
    {
      path: '/article/post',
      name: 'article-post',
      component: defineAsyncComponent({
        loader: () => import('@/views/article-post/index.vue'),
        //loadingComponent: () => import('@/views/article-post/skeleton.vue'), ❌ cannot be dynamic import
        loadingComponent: Skeleton ✅
      }),
    },
  ]
})

另请注意，加载组件 ( Skeleton) 仅显示一次，即，如果组件定义尚未在缓存中。这个Codesandbox添加了一个人为的延迟loader()来演示。

Answer 2

您可以像这样异步加载组件：

{
    path: '/article/post',
    name: 'article-post',
    component: () => ({
        component: import('@/views/article-post/index.vue')
        loading: import('@/views/article-post/skeleton.vue')
    })
},