在nuxt中使用自定义布局更改页面时如何修复“无效的组件名称”？

Question

[Vue warn]: Invalid component name: "layouts/default.vue". Component names should conform to valid custom element name in html5 specification.

正如您在上面的错误中看到的那样，当我为我的 Auth 页面使用自定义布局时，我遇到了一个问题。问题是，当我使用自定义布局转到 Auth 页面时，我没有收到任何错误，但是每当我尝试从 Auth 页面返回时，都会出现上述错误。当我成功login/register或只是点击后退按钮时，我会在加载主页时收到警告

这是安装 nuxt 时位于默认位置的默认布局：

<template>
      <v-main>
            <v-flex>
              <Nuxt />
            </v-flex>
      </v-main>
</template>

<script>
  export default {
    components: {AppHeader, AppFooter},
    async fetch () {
      try {
        const layout= await this.$axios.$get('/app')
        this.app= layout;
      } catch (e) {
        console.log(e)
      }
    },
    data() {
      return{
        app: null,
      }
    }
  }
</script>

Answer 1

我设法通过向布局添加名称属性来解决这个问题......

布局/default.vue

 export default {
  name: "default"
  ...
}

错误消失了

Answer 2

我认为问题在于在两个组件中选择名称，您使用“auth”作为我认为会产生问题的组件名称。

   export default {
    name: "auth"
   }

在“身份验证布局”和“身份验证页面”中：

Answer 3

原答案

问题是async fetch默认布局，我用它替换了它nuxtServerInit。当我切换布局 nuxt 想要再次调用 api 时，因为异步获取应该再次加载，因为它在身份验证布局切换后再次加载。所以我将其替换为nuxtServerInit以防止发生此警告。

祝你好运

小更新和澄清

因此，我将尝试更多地解释我几天前遇到的情况，以澄清这个问题是如何发生的。

您在使用 时可能没有任何问题async fetch，这在 中也已被弃用Nuxt 2，但这实际上在大多数教程中都是如此，并且就基于特定路线的应用程序使用多个布局而言，async fetch当布局动态发生变化时，导致了此问题。

我正在创建的应用程序有Dynamic Page Render类似的Wordpress情况，就我开发的不同类型的页面而言Dynamic Layout changer，但是async fetch当我返回到它正在执行的主布局的另一个布局时，使用导致了这个问题async fetch。

对于一些正在使用的人来说，Vue他们可能会遇到这个问题，而他们没有name : {layoutName}，但就我的应用程序而言，它非常复杂，问题在于使用async fetch它已被弃用的Nuxt 2，而不是NuxtServerInit。

所以一般来说，您可以使用async fetch或等。但在第一次尝试布局时，您应该使用NuxtServerInit获取数据来渲染主要数据等。