vue3 keep-alive 引起Cannot read properties of null ( reading ‘nextSibling‘)

<router-view v-if="$route.meta.keepAlive" v-slot="{ Component }">
   <transition name="fade" mode="out-in">
         <component :is="Component" :key="$route.path" />
   </transition>
</router-view>
<router-view v-if="!$route.meta.keepAlive" v-slot="{ Component }">
   <transition name="fade" mode="out-in">
      <keep-alive>
           <component :is="Component" :key="$route.path" />
      </keep-alive>
   </transition>
</router-view>
//上面代码通过keepAlive属性来使用keep-alive从而,是否保持组件的缓存,
如果使用不当,这里会引起标题中的错误提示,
比如

export const SettingRouters = {
  path: '/a',
  component: layout,
  redirect: '/a/b',
  meta: {
    title: 'setting',
    icon: 'ic ic-homepage-fill'
  },
  children: [
    {
      path: '/a/b',
      name: 'ab',
      component: () => import('@/views/c/a/b/index.vue'),
      meta: {
        title: 'a',
        icon: 'ic'
      }
    },
    {
      path: '/a/b/edit',
      name: 'abe',
      component: () => import('@/views/c/a/b/edit.vue'),
      meta: {
        title: 'new',
        icon: 'ic',
        hidden: true
        keepAlive: true  //这里通过该属性来表示是否保存缓存,
      }
    }
  ]
}

正确使用keep-alive的方式应该是

<router-view v-if="!$route.meta.keepAlive" v-slot="{ Component }">
   <transition name="fade" mode="out-in">
       <keep-alive :exclude="excludeList">
           <component :is="Component" :key="$route.path" />
       </keep-alive>
  </transition>
</router-view>
//这里使用exclude的属性来排除不保存缓存的组件 include不填,默认都保存组件缓存,请参考vue官方对exclude的解释
vu3 组件名称 
<script lang="ts">
export default {
  name: 'a-e'
}
</script>
<script lang="ts" setup>
</script>
如果觉得不优雅,请参考  https://zhuanlan.zhihu.com/p/481640259
组件名称配置好后, 配置excludeList
let excludeList:any = ['a-e']

Vue 3中使用`keep-alive`组件时,可能会出现"Cannot read properties of undefined (reading 'indexOf')"的错误。这个错误通常是由于在`keep-alive`组件内部使用了`v-for`指令,并且没有为每个被缓存的组件提供唯一的`key`属性所导致的。 为了解决这个问题,你需要为`keep-alive`组件内部的每个被缓存的组件添加一个唯一的`key`属性。这样Vue就能够正确地跟踪每个组件的状态,并避免出现上述错误。 下面是一个示例,演示了如何在Vue 3中使用`keep-alive`组件并为每个被缓存的组件添加唯一的`key`属性: ```vue <template> <div> <keep-alive> <component :is="currentComponent" :key="currentComponentKey"></component> </keep-alive> <button @click="toggleComponent">Toggle Component</button> </div> </template> <script> import ComponentA from './ComponentA.vue'; import ComponentB from './ComponentB.vue'; export default { data() { return { currentComponent: 'ComponentA', currentComponentKey: 0 }; }, methods: { toggleComponent() { if (this.currentComponent === 'ComponentA') { this.currentComponent = 'ComponentB'; this.currentComponentKey = 1; } else { this.currentComponent = 'ComponentA'; this.currentComponentKey = 0; } } }, components: { ComponentA, ComponentB } }; </script> ``` 在上面的示例中,我们使用了`component`元素来动态地渲染不同的组件,并为每个组件提供了一个唯一的`key`属性。这样,无论是切换组件还是在`keep-alive`中缓存组件,都不会出现"Cannot read properties of undefined (reading 'indexOf')"的错误。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值