如何在 VueRouter@4.0.0 (Vue3) 中使用 createAsyncComponent？

Question

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

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

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

我该怎么做？

Answer 1

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

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

Answer 2

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() 中添加了人为延迟以进行演示。

如何在 VueRouter@4.0.0 (Vue3) 中使用 createAsyncComponent？

How to use createAsyncComponent in VueRouter@4.0.0 (Vue3)?

vue.js

vue-router

vuejs3

vue-router4