Version

3.2.11

Reproduction link

codesandbox.io

Steps to reproduce

1. Click vue.
2. Click list.
3. Now you can see detail.
4. Back to list.
5. Back to vue.
6. Error happed.

What is expected?

• Fix the Error.

What is actually happening?

First, the async setup is wrapped by <route-view/>, and the <Suspense> component wraps only them. When you go deeper into the component and try to fall back outside of <Suspense>, the error occurs. It seems like <Suspense> is blocking the root element from the component.

When I add another parent element to <Suspense> like this, the error disappears and I would like to know why:

    <suspense>
        <div>   <------ parent element fix the error.
            <router-view></router-view>
        </div>
    </suspense>

When using suspense, it requires a single root node. So your view components must also follow that rule.

When using suspense, it requires a single root node. So your view components must also follow that rule.

Sorry, I didn't know this because the Chinese document is missing the information.

The documentation I found through the search engine is fake and the updates are still stuck in the previous version. The real link is this: https://v3.cn.vuejs.org/.