Skip to content

Suspense内嵌套路由且含有异步组件,异步结束前路由跳转报错 #7828

Closed as not planned
@gitsheny

Description

@gitsheny

Vue version

3.2.47

Link to minimal reproduction

https://github.com/gitsheny/vue-Suspense.git

Steps to reproduce

<Suspense>内含有嵌套路由,且使用了异步组件时。
当页面内的异步未执行结束时路由跳转,会发生错误。

// App.vue
<div>
  <router-link to="/">routerA</router-link>;&nbsp;
  <router-link to="/pageB">routerB</router-link>
</div>

<RouterView v-slot="{ Component }">
  <template v-if="Component">
    <Suspense>
      <component :is="Component" />
    </Suspense>
  </template>
</RouterView>
// router/index.js
...
routes: [{
  path: '/',
  component: Layout,
  children: [...pageA.vue,pageB.vue]
}]

// Layout.vue
<template>
  <router-view />
</template>
// pageA.vue ,pageB.vue
<script setup>
await new Promise((resolve) => {
  setTimeout(() => resolve(), 5000)
})
</script>

What is expected?

跳转正常

What is actually happening?

Uncaught (in promise) TypeError: Cannot read properties of null (reading 'parentNode')
    at parentNode (runtime-dom.esm-bundler.js:35:30)
    at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5731:17)
    at ReactiveEffect.run (reactivity.esm-bundler.js:190:25)
    at instance.update (runtime-core.esm-bundler.js:5763:56)
    at updateComponent (runtime-core.esm-bundler.js:5588:26)
    at processComponent (runtime-core.esm-bundler.js:5521:13)
    at patch (runtime-core.esm-bundler.js:5119:21)
    at patchSuspense (runtime-core.esm-bundler.js:1313:13)
    at Object.process (runtime-core.esm-bundler.js:1204:13)
    at patch (runtime-core.esm-bundler.js:5125:26)

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (8) x64 Intel(R) Core(TM) i7-6700HQ CPU @ 2.60GHz
    Memory: 1.62 GB / 7.92 GB
  Binaries:
    Node: 16.15.1 - D:\nodejs\node.EXE
    Yarn: 1.22.19 - D:\nodejs\node_global\node_modules\yarn\bin\yarn.CMD
    npm: 8.11.0 - D:\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (110.0.1587.63)
    Internet Explorer: 11.0.19041.1566
  npmPackages:
    vue: ^3.2.47 => 3.2.47

Any additional comments?

No response

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions