Nuxt 页面作为组件？答案

【问题标题】：Nuxt pages as components?Nuxt 页面作为组件？
【发布时间】：2023-04-08 13:06:02
【问题描述】：

我是 Nuxt 的新手，但不是 Vue。我的理解是 Nuxt 页面是组件。在使用 Nuxt 脚手架设置站点后，asyncData 和计算属性之类的东西在默认的 index.vue 文件上可以正常工作。但这要么不适用于子目录中的页面，要么我错过了如何做到这一点。如果在页面 /session/books.vue 上，如果我执行以下操作：

<template>{{ name }}, {{allBooks }}</template>

<script>export default {

   asyncData (context) {
    return {name: 'world'}
   },

   computed: {
    allBooks () {
      return this.$store.state.books.all
      // or even just return 'hello'
    }
  }
 }
</script>

我收到“Uncaught SyntaxError: Unexpected token 'export'”，外加一个警告“属性或方法未在实例上定义，但在渲染期间引用”，用于“name”和“allBooks”。我是否对脚本元素进行了错误的编码，或者是否有一些我不知道的管理页面组件行为的规则？当然我不需要将每个页面都注册为组件吗？这些似乎都是非常基本的东西，但我整个早上都在谷歌上搜索了这两个，查看了文档，但没有找到任何有用的东西。

【问题讨论】：

Unexpected token 'export' 表明您的文件未正确解析。您的 nuxt/webpack 配置可能有问题。或者您只是没有将 dot-vue 文件放在正确的目录中。 Nuxt 固执己见地决定了您将页面放在哪里——它们必须在 pages 目录中。文件扩展名是 dot-vue 的，对吧？
是的，这些是位于 pages 目录中的子目录中的 dot-vue 文件。这发生在使用 create-nuxt-app 两次全新安装的 nuxt 中。我已经设法摆脱了意外的令牌问题。但我仍然收到有关“属性或方法未在实例上定义但在渲染期间引用”的警告。
你能分享一个codesandbox复制品吗？

标签： javascript vue.js nuxt.js

【解决方案1】：

您的模板部分无效。模板部分必须是有效的 html，并且只能包含 1 个根元素。

【讨论】：

该死，我偷懒了。我应该准确地粘贴我所拥有的。请假设模板部分是有效的。