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

愉快的马儿

于 2022-03-03 23:12:03 发布

阅读量2.1k

点赞数

分类专栏：前端 html 文章标签：爬虫前端 http

本文链接：https://blog.csdn.net/m0_67266787/article/details/123266413

版权

在使用 Vue 3.2.4 版本及 vue-router 4.0.11 的项目中遇到 keep-alive 组件失效并抛出 'Cannot read properties of null (reading ‘parentNode‘)' 错误。问题可能与版本更新有关，目前的解决方法是进一步研究错误原因和官方文档，以了解潜在的修复方案。

摘要由CSDN通过智能技术生成

版本：
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>

*可能是新版本的问题，也有可能是文档上有提示我没看到，先记录一下，晚点看看原理