通过 nuxt-link 导航时出现错误：未捕获（承诺中）TypeError：无法读取 null 的属性（读取“parentNode”）

Question

我遇到了一个问题，当我转到 nuxt-link 时出现错误：

runtime-dom.esm-bundler.js:39 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'parentNode')
at parentNode (runtime-dom.esm-bundler.js:39:30)
at Object.resolve (runtime-core.esm-bundler.js:1517:15)
at Object.resolve (runtime-core.esm-bundler.js:1547:28)
at runtime-core.esm-bundler.js:1646:20

我使用以下软件包：

<script setup>
import {useIsLoadingStore} from '~/store/auth.store'

const isLoadingStore = useIsLoadingStore()

</script>

<template>
  <LayoutLoader v-if="isLoadingStore.isLoading"/>
  <div v-else style="min-height: 100vh">
    <header>
      <div class="w-full h-auto max-h-[720px] overflow-hidden">
        <slot name="baner"/>
      </div>
    </header>
    <section>
      <div>
        <slot/>
      </div>
    </section>
    <footer>
      <div class="w-full h-[110px] pt-7 pb-[27px] bg-zinc-800 justify-center items-center inline-flex">
        <div class="self-stretch justify-start items-center gap-5 flex">
          <div class="relative">
            <lazy-nuxt-img src="eDnipro_logo.svg" class="md:size-16 size-10"/>
          </div>
          <div class="text-center text-white md:text-2xl text-lg font-normal font-['DniproCity'] leading-7">Розроблено
            єДніпро
          </div>
        </div>
      </div>
    </footer>
  </div>
</template>

<style scoped>
.grid {
  display: grid;
  grid-template-columns: 1fr 6fr;
}
</style>

这是项目代码本身：

默认布局

<script setup>
import {useIsLoadingStore} from '~/store/auth.store'

const isLoadingStore = useIsLoadingStore()
</script>

<template>
  <LayoutLoader v-if="isLoadingStore.isLoading"/>
  <div v-else style="min-height: 100vh">
    <header>
      <div class="w-full h-auto max-h-[720px] overflow-hidden">
        <slot name="baner"/>
      </div>
    </header>
    <section>
      <div>
        <slot/>
      </div>
    </section>
    <footer>
      <div class="w-full h-[110px] pt-7 pb-[27px] bg-zinc-800 justify-center items-center inline-flex">
        <div class="self-stretch justify-start items-center gap-5 flex">
          <div class="relative">
            <lazy-nuxt-img src="eDnipro_logo.svg" class="md:size-16 size-10"/>
          </div>
          <div class="text-center text-white md:text-2xl text-lg font-normal font-['DniproCity'] leading-7">Розроблено
            єДніпро
          </div>
        </div>
      </div>
    </footer>
  </div>
</template>

<style scoped>
.grid {
  display: grid;
  grid-template-columns: 1fr 6fr;
}
</style>

app.vue

      <p class="text-stone-300 md:text-lg text-sm font-normal font-['DniproCity']">
        {{ oneNew.attributes?.created }}
      </p>

      <h3 class="text-white mdL:text-[35px] text-lg font-medium font-['DniproCity'] mt-5"
          style="line-height: normal">
        {{ oneNew.attributes?.title }}
      </h3>
    </div>
  </nuxt-link>
</article>

一些文章代码点击 nuxt-link 时出现错误。我无法定位原因

<div class="grid items-center grid-cols-12 justify-around gap-6 my-10">
    <article
        class="lg:col-span-4 md:col-span-6 col-span-12 w-full lg:h-[600px] h-[400px] relative bg-black rounded-[20px] overflow-hidden hover:cursor-pointer relative"
        v-for="oneNew in news">
      <nuxt-link :to="'/new/'+oneNew?.id">
        <lazy-nuxt-img
            :src="'http://api.forpost.dniprorada.gov.ua' + oneNew?.attributes?.image?.data?.attributes?.url"
            class="h-full w-full object-cover object-center z-0"/>
        <div class="absolute bottom-0 left-0 w-full lg:h-[300px] h-[200px] bg-black bg-opacity-60 z-40 p-5 h-full">

          <p class="text-stone-300 md:text-lg text-sm font-normal font-['DniproCity']">
            {{ oneNew.attributes?.created }}
          </p>

          <h3 class="text-white mdL:text-[35px] text-lg font-medium font-['DniproCity'] mt-5"
              style="line-height: normal">
            {{ oneNew.attributes?.title }}
          </h3>
        </div>
      </nuxt-link>
    </article>
  </div>

更改代码并自动重新加载时也会出现该错误。如果您需要其他文件或代码片段，请说出来！

Answer 1

我在 Nuxt/Vuetify 3 应用程序中遇到了完全相同的问题。在验证任何路线更改后，尤其是来自 Vuetify 导航抽屉的路线更改会导致同样的问题。