Suspense regression when used with RouterView

[cexbrayat]

Version

3.0.0-rc.12

Reproduction link

https://jsfiddle.net/vmprxysu/

Steps to reproduce

Consider a component like the following:

<Suspense>
  <template #fallback>Loading...</template>
  <router-view />
</Suspense>

with a router config loading an async component

What is expected?

In rc.10, we see the loading indicator and then the async component is displayed

What is actually happening?

In rc.12 nothing is displayed. Is this expected with the recent changes or is it a regression?

[posva]

Probably related to the rendered component being nested. The component is displayed if the v-slot api is used

[cexbrayat]

You mean if we use <hello /> directly instead of <router-view />? If so, yes it does work. But as it was nice to be able to use Suspense around the RouterView to handle the async loading, I thought it was worth opening an issue.

[husayt]

I have the same issue

[yyx990803]

Similar to <transition>, the new Suspense now must be used with <router-view> via its slot-based syntax because it now must have direct access to the toggled root node:

<router-view v-slot="{ Component }">
  <suspense>
    <component :is="Component"/>
  </suspense>
</router-view>

[surmon-china]

Similar to <transition>, the new Suspense now must be used with <router-view> via its slot-based syntax because it now must have direct access to the toggled root node:

<router-view v-slot="{ Component }">
  <suspense>
    <component :is="Component"/>
  </suspense>
</router-view>

[Vue warn]: <Suspense> slots expect a single root node.

[liuweiGL]

Similar to <transition>, the new Suspense now must be used with <router-view> via its slot-based syntax because it now must have direct access to the toggled root node:

<router-view v-slot="{ Component }">
  <suspense>
    <component :is="Component"/>
  </suspense>
</router-view>

[Vue warn]: <Suspense> slots expect a single root node.

Fixed:

  <router-view v-slot="{ Component }">
    <suspense>
      <div>
        <component :is="Component" />
      </div>
    </suspense>
  </router-view>

[810505339]

https://codesandbox.io/s/cool-poincare-bftc5?file=/src/views/About.vue

[810505339]

为什么 loading 不会出现呢？

[yaquawa]

Now it shows the <router-view /> but not showing the <template #fallback>, is this is the intended behavior?

[obadakhalili]

@yaquawa

Now it shows the <router-view /> but not showing the <template #fallback>, is this is the intended behavior?

https://v3.vuejs.org/guide/migration/suspense.html#:~:text=Vue%20Router%20has,the%20usual%20way.

[davidpmccormick]

The slot-based-syntax example in the router docs referenced by @yyx990803 above shows a #default and a #fallback template, but like @yaquawa, I don't see anything rendered in the #fallback under conditions where I would expect to.

Edit: found that adding timeout=0 solves it, as mentioned here

[mitow7821]

[Vue warn]: <Suspense> slots expect a single root node.

Fixed:

  <router-view v-slot="{ Component }">
    <suspense>
      <div>
        <component :is="Component" />
      </div>
    </suspense>
  </router-view>

I've added keep-alive and it's not working because of this extra div.
Is there any way to disable that warning without adding div?