Suspense内嵌套路由且含有异步组件,异步结束前路由跳转报错
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>;
<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
duplicate of https://github.com/vuejs/core/pull/6095
fixed via https://github.com/vuejs/core/pull/7290