Nuxt3中NuxtLink跳转首页报DOMException错误求助

我基于Nuxt3、Strapi4与GraphQL完成博客原型开发后，遇到跳转异常问题：[slug].vue中的NuxtLink使用to="/"跳转首页时，首次点击报错Uncaught (in promise) DOMException: String contains an invalid character，二次点击则出现Vue调度器错误及TypeError: node is null。

相关代码 #

[slug].vue #

<template>
  <div class="bg-white py-24 sm:py-32">
    <NuxtLink to="/" class="text-gray-600 hover:text-gray-900">home</NuxtLink>
    {{ postData.title }}
    {{ postData.description }}
    {{ postData.body }}
  </div>
</template>

<script setup lang="ts">
import gql from "graphql-tag";
const route = useRoute();

const postSlug = route.params.slug;

// apollo query

const getArticleBySlug = gql`
  query getArticleBySlug($slug: String!) {
    articles(filters: { slug: { eq: $slug } }) {
      data {
        id
        attributes {
          title
          slug
          description
          body
          date
        }
      }
    }
  }
`;

const { data } = await useAsyncQuery(
  getArticleBySlug,
  {
    slug: postSlug,
  },
  { lazy: true }
);

const postData = data.value.articles.data[0].attributes;

console.log(postData);
</script>

<style scoped></style>

index.vue #

<template>
  <div class="container">
    <div class="bg-black" v-for="article in test.data" v-bind="article.id">    
      <h1 class="text-black text-4xl">
          {{ article.attributes.title || 'Loading...' }}
      </h1>
      <p>{{ article.attributes.description}}</p>
      <p>{{ article.attributes.body}}</p>
      <NuxtLink :to="article.attributes.slug" class="link">Read</NuxtLink>
      
    </div>
  </div>
</template>

<script setup lang="ts">
import gql from 'graphql-tag';

const query = gql`
  query allArticlesQuery {
    articles {
      data {
        id
        attributes {
          title
          slug
          description
          body
          date
        }
      }
    }
  }
`

const { data } = await useAsyncQuery(query )

const test = data.value.articles 
// console.log(test);
</script>

<style scoped>
</style>

已尝试的解决方案 #

• 将to="/"改为to="http://localhost:3000"，可正常跳转但非理想方案
• 将to="/"改为:to="{path: '/' }"，无效
• 将to="/"改为{name: 'index'}，无效
• 移除index.vue中的查询，跳转正常但无法展示所有文章

希望得到有效解决方法，实现正常跳转首页。

内容的提问来源于stack exchange，提问作者locdandcoded