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()中添加了一个人为的延迟来演示。

可以按如下方式异步加载组件：

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

Note
不要对路由使用异步组件。异步组件仍然可以在路由组件内部使用，但路由组件本身只是动态导入。