Я бы не сказал, что это лучший ответ, но мне кажется, что для того, чтобы <Suspense> работал, его дочерний элемент должен быть асинхронным компонентом. В этом случае <RouterView> отображается как неасинхронный компонент (даже несмотря на то, что его дочерние элементы являются асинхронными компонентами), поэтому корень <Suspense> не будет ждать <Suspense> внутри <RouterView>.

В качестве обходного пути, я думаю, мы можем кэшировать компонент, чтобы он не выглядел так, как будто он исчез при смене маршрутизатора (третий случай).

Мой метод кэширования заключается в добавлении этого <script setup> в файл demo.vue:

<script setup>
import { ref } from 'vue';

const CachedComponent = ref(null);

function cacheComponent(Component) {
  CachedComponent.value = Component || CachedComponent.value;
}
</script>

А затем измените <RouterView> внутри того же файла на это:

    ...
    <RouterView v-slot = "{ Component }">
      {{ cacheComponent(Component) }}
      <template v-if = "Component || CachedComponent">
        <Suspense>
          <component :is = "Component || CachedComponent" />
          <template #fallback>
            <div style = "font-size: 1.5rem">Loading Demo Nested...</div>
          </template>
        </Suspense>
      </template>
    </RouterView>
    ...

Строка {{ cacheComponent(Component) }} будет кэшировать компонент при его рендеринге (она используется таким образом, потому что <RouterView> не имеет обратного вызова, когда его слоты смонтированы). Строка CachedComponent.value = Component || CachedComponent.value; обновит значение CachedComponent, если есть новый компонент, который не является ложным. И если это ложно (это означает, что он еще не смонтирован или больше не смонтирован), он отобразит предыдущую последнюю кэшированную версию компонента. Я знаю, что это хакерство, но, на мой взгляд, это очень простой обходной путь.

Это ответвление стека, если вам интересно.

Обновление Vue 3.3.2 — 17.05.2023

Я только что протестировал эту версию, и вложенные страницы маршрутизатора с async setup работают.

Из того, что я вижу, страницы вложенных страниц маршрутизатора больше не отображают пустые страницы с предупреждением консоли о необходимости завернуть в Suspense.

Вместо этого верхний уровень Suspense теперь обрабатывает дочерние страницы, не предполагая, что вокруг вложенных Suspense должен быть RouterView.

// App.vue
<RouterView v-slot = "{ Component, route }">
    <template v-if = "Component">
        <KeepAlive>
            <Suspense>
                <component :is = "Component"/>
                <template #fallback>
                    LOADING...
                </template>
            </Suspense>
        </KeepAlive>
    </template>
</RouterView>

// pages/nested-path/index.vue

<div>
  <RouterView v-slot = "{ Component, route }">
    <component :is = "Component" :key = "route.path"/>
  </RouterView>
</div>

Предыдущий ответ

Это просто не работает в настоящее время для сложных проектов, когда у вас есть вложенные маршруты, оно отлично работает с маршрутизацией на одном уровне, как вы заметили.

Я некоторое время боролся с этим, перепробовал много комбинаций и обнаружил, что вложенная приостановка не работает, это связано с нарушением функциональности вокруг key, который пассивно используется для компонента маршрутизатора, я попытался установить это вручную, что дало различные результаты и другие неустранимые / раздражающие проблемы, включая любое использование с keep-alive.

Невозможность использовать async setup была действительно раздражающей и досадной, особенно для приостановки во время согласования других промисов перед попыткой вызова API, мне особенно нравится, насколько чистым был бы код.

Мне пришлось согласиться на асинхронный watch, где я задал loading = ref(true) состояние, переданное пользовательской оболочке компонента состояния загрузки, которая будет блокировать ввод-вывод контента и отображать ход загрузки в теле контента.

// myPage.vue

<script setup lang = "ts">

const props = defineProps<{
    id: string
}>()

const loading = ref(true)

watch(props, async () => {

  loading.value = true

  await myApi.endpoint.get(props)

  loading.value = false

}, {immediate: true})

</script>

<template>
  <content-loader :loading = "loading">
    <div>
      My page content
    </div>
  </content-loader>
</template>

// ContentLoader.vue

<script setup lang = "ts">

withDefaults(defineProps<{
    loading: boolean
}>(), {
    loading: true
})

</script>

<template>

    <div class = "d-flex fill-height justify-center align-center">

        <template v-if = "$props.loading">

            <span>Content loading...

        </template>

        <template v-else>
            <slot/>
        </template>

    </div>

</template>

Если хотите, вы также можете добавить туда переходы.

Я также думал о повторном выводе повторения оболочки загрузки и ссылки на загрузку, переместив ее в родительский компонент, содержащий дочерний элемент router-view, и используя emit на дочерней странице для переключения загрузки. Я не пробовал это, нужно убедиться, что начальное состояние истинно при переходе на другие страницы.