NuxtPage 与 Nuxt3 的插槽答案

【问题标题】：NuxtPage vs slot for Nuxt3NuxtPage 与 Nuxt3 的插槽
【发布时间】：2022-11-11 01:12:44
【问题描述】：

Nuxt3 中的这两个components 有什么区别，如何正确使用它们？

如果我想使用pages/...，这里创建链接和从一个页面跳转到另一个页面的正确方法是什么？

【问题讨论】：

【解决方案1】：

文档中几乎解释了一切：https://v3.nuxtjs.org/migration/pages-and-layouts/

您需要在app.vue 中使用它

<template>
  <nuxt-layout>
    <nuxt-page /> <!-- used to display the nested pages -->
  </nuxt-layout>
</template>

使用默认的/layouts/default.vue 文件

<template>
  <div>
    this is coming from the layout
    <slot /> <!-- required here only -->
  </div>
</template>

你会在/（/pages/index.vue）上得到这个

<template>
  <div>index page</div>
</template>

并通过以下结构，您将实现动态页面

/pages/users/index.vue

<script setup>
definePageMeta({
  layout: false
});

function goToDynamicUser() {
  return navigateTo({
    name: 'users-id',
    params: {
      id: 23
    }
  })
}
</script>

<template>
  <div>
    <p>
      index page
    </p>
    <button @click="goToDynamicUser">navigate to user 23</button>
  </div>
</template>

/pages/users/[id].vue

<script setup>
definePageMeta({
  layout: false
});

const route = useRoute()
</script>

<template>
  <pre>{{ route.params.id }}</pre>
</template>

我已经删除了此处的布局以显示如何禁用它，但您完全可以在此处保留默认设置，甚至提供custom one。

因此，nuxt-page 用于在您的应用程序中显示页面（替换<nuxt /> 和<nuxt-child />），而<slot /> 用于布局（与使用slot tag 的任何其他组件一样））。

【讨论】：