nuxtpage vs for nuxt33

Question

这两个组件在nuxt3中有什么区别，我如何正确使用它们？

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

Answer 1

文档中的所有内容几乎都在解释： https://v3.nuxtjs.org/迁移/页面和layouts/

您需要在app.vue中使用

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

default /layouts/default.vue.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要在要在应用中显示页面时使用（替换＆lt; nuxt/＆gt; and code> and ＆lt; nuxt; nuxt; nuxt; nuxt; /＆gt;）时＆lt; slot/＆gt;将用于布局（作为使用 插槽 tag ）。