vue 3.0 keep-alive 失效报错 Cannot read properties of null (reading ‘parentNode‘)

蜡笔小嘟

已于 2023-10-30 11:25:15 修改

阅读量6k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue.js javascript 前端

于 2021-12-07 17:17:02 首次发布

本文链接：https://blog.csdn.net/susanliy/article/details/121774001

vue 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了在使用Vue 3.2.4版本和Vue Router 4.0.11时，遇到Suspense组件失效的问题。通过在<router-view>中添加`v-slot`和`keep-alive`组件，并使用`include`属性，成功解决了这个问题。作者推测可能是新版本更新带来的问题，待进一步研究原理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

版本：
vue “3.2.4”
vue-loader “16.4.1”
vue-router “4.0.11”

 <router-view v-slot="{ Component }">
       <keep-alive>
          <suspense timeout="0">
            <template #default>
              <component :is="Component" />
            </template>
            <template #fallback>
            ...
            </template>
          </suspense>     
        </keep-alive>
      </router-view>

报错
在这里插入图片描述
解决方法：

 <router-view v-slot="{ Component }">
       <keep-alive :include="includeList"> //添加include属性  解决了失效问题
          <suspense timeout="0">
            <template #default>
              <component :is="Component" />
            </template>
            <template #fallback>
            ....
            </template>
          </suspense>     
        </keep-alive>
      </router-view>