Как правильно использовать defineAsyncComponent во vue-router?

Question

[Евгений]

Подскажите по отложенной загрузки компонентов во vue3. Во маршрутах прописываю загрузку компонентов через defineAsyncComponent.

{
    path: '/config/guides/:id',
    name: 'config_guides_item',
    component: defineAsyncComponent({
        loader: () => import('../../components/pages/config/guides/GuidesItems'),
    })
}

При сборке функционально всё работает, но в брауезере постоянно выдает ошибку. Я так понимаю его нельзя использовать именно с vue-router?

[Vue Router warn]: Component "default" in record with path "/config/guides/:id" is defined using "defineAsyncComponent()". Write "() => import('./MyPage.vue')" instead of "defineAsyncComponent(() => import('./MyPage.vue'))".

Какие варианты только не перепробовал. И отдельно импортировал компонент в константу, потом добавляя в маршрут. Всё тоже самое.

const GuidesItems = defineAsyncComponent(() =>
    import('../../components/pages/config/guides/GuidesItems')
)
.......
{
    path: '/config/guides/:id',
    name: 'config_guides_item',
    component: GuidesItems
}

Подскажите как правильно использовать defineAsyncComponent для отложенной загрузки компонентов?

Answer 1

[Константин Б.]

Так же как и раньше через динамический импорт
const asyncModal = () => import('./Modal.vue')
В документации Vue написано что defineAsyncComponent не предназначен для использования в маршрутах

Comments

[Евгений]

Немного запутался. Получается в маршруте я указываю один компонент для рендеринга, а уже в самом компоненте подгружаю через динамический импорт?

[Константин Б.]

Евгений, зачем? В маршруте указываете только и все. Он подгрузится только при переходе на этот маршрут

[Евгений]

Спасибо, видать совсем запутался.
Где и для чего тогда использовать "defineAsyncComponent" не понял