Question

asyncData and fetch component options

Nuxt 3 为从 API 获取数据 提供了新选项。

同构获取

请参阅 元标记迁移。

key

您现在可以在“definePageMeta”编译器宏中定义一个键。

pages/index.vue

- <script>
- export default {
-   key: 'index'
-   // or a method
-   // key: route => route.fullPath
- }
+ <script setup>
+ definePageMeta({
+   key: 'index'
+   // or a method
+   // key: route => route.fullPath
+ })
  </script>

迁移步骤

See layout migration.

loading

Nuxt 3 尚不支持此功能。

middleware

请参阅 中间件迁移。

scrollToTop

Nuxt 3 尚不支持此功能。如果您想覆盖 vue-router 的默认滚动行为，可以在 ~/app/router.options.ts 中进行（参见 [docs](/docs /dirs/pages/#router-options)) 了解更多信息。

transition

See layout migration.

validate

Nuxt 3 中的验证钩子只接受一个参数，即“路由”。 就像在 Nuxt 2 中一样，您可以返回一个布尔值。 如果返回 false 并且找不到另一个匹配项，这将意味着 404。您也可以直接返回一个带有 statusCode/statusMessage 的对象以立即响应错误（不会检查其他匹配项）。

pages/users/[id].vue

- <script>
- export default {
-   async validate({ params }) {
-     return /^\d+$/.test(params.id)
-   }
- }
+ <script setup>
+ definePageMeta({
+   validate: async (route) => {
+     const nuxtApp = useNuxtApp()
+     return /^\d+$/.test(route.params.id)
+   }
+ })
  </script>

watchQuery

这在 Nuxt 3 中不支持。相反，您可以直接使用观察者来触发重新获取数据。

pages/users/[id].vue

<script setup>
const route = useRoute()
const { data, refresh } = await useFetch('/api/user')
watch(() => route.query, () => refresh())
</script>