Nuxt3 navigateTo 给出 Uncaught (in promise) TypeError答案

【问题标题】：Nuxt3 navigateTo gives Uncaught (in promise) TypeErrorNuxt3 navigateTo 给出 Uncaught (in promise) TypeError
【发布时间】：2023-01-28 05:24:17
【问题描述】：

我正在尝试以编程方式从 Nuuxt3 应用程序的列表中路由到详细信息页面：

#/pages/items/index.vue

<script setup lang="ts">
    const gotoDetail = async (itemId) => {
      await navigateTo(`/items/${itemId}`)
    } 
</script>

<template>
  <div>
    <NuxtLayout name="main-standard">
      
      <template #main-content>
        <div v-for='item in items' :key=item>
          <div @click='gotoDetail(item.id)'
        </div>
      </template> 

      <template #main-content>
        <!-- aside content -->
      </template> 
    
    <NuxtLayout>
  </div>
</template>

我收到此错误消息：

 ERROR: Uncaught (in promise) TypeError: Cannot read properties of null (reading 'parentNode')

我搜索了一个答案，大多数解决方案都提到用 div 包装 <NuxtLayout>。但这并没有解决我的问题。

我正在使用默认布局。所以 <NuxtLayout name="main-standard"> 在这个默认布局中。两个页面：index.vue 和[itemId].vue 都在pages/items/ 文件夹中。

我做错了什么，但就是找不到。有人看到发生了什么事吗？

【问题讨论】：

标签： vuejs3 vue-router nuxt3

【解决方案1】：

这里的一些事情会破坏你的代码。

第一，带有点击处理程序的中间 div 缺少结束 >、内容和结束 </div>。（当然，您可能为了简洁而省略了它）

items 未定义，因此无需迭代。

您正在为多个模板使用相同的 v-slot 名称 #main-content，但每个插槽名称都应该是唯一的。 # 属性（v-slot 的简写）应该与您在布局中写入的插槽名称匹配，并且这些名称在组件中也必须是唯一的。

主要问题似乎与您使用布局的方式有关。要使用该组件扰乱页面布局，您必须将其添加到设置脚本中：

definePageMeta({
  layout: false,
});

将自定义布局应用于此页面的另一种方法是将 false 布尔值替换为布局名称，并完全省略此页面中的标记。为此，app.vue 应该有一个 <NuxtLayout> 标签包装 <NuxtPage>

不是一个重大的变化，但它也可以简化编写的东西

<NuxtLink :to="`/items/${itemId}`">{{ whatever you wanted inside that div }} </NuxtLink>

如果您需要在导航到该页面之前运行代码，您可以将它添加到顶级中间件文件夹中，并在您希望它运行之前的页面上调用该命名的中间件。

【讨论】：