Subscribe on changes!

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

avatar
Mar 5th 2023

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

avatar
Jun 23rd 2023

I had the same issue.

avatar
Nov 29th 2023

I had the same issue with nuxt@latest