NuxtPage对Nuxt3插槽

Question

这两个components在Nuxt3中的区别是什么?我如何正确地使用它们？

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

Answer 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>

我在这里删除了布局，以展示如何禁用它，但您完全可以在这里使用默认设置，甚至可以提供一个自订一。

因此，当您想在应用程序中显示页面(替换nuxt-page和<nuxt-child />)时，要使用<slot />，而在布局中要使用<slot />(与使用标签的任何其他组件一样)。