时间戳

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

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

问题描述

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

正如您在上面的错误中看到的那样，当我为我的身份验证页面使用自定义布局时，我遇到了一个问题。问题是当我使用自定义布局进入 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>

标签： nuxt.js

解决方案

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

布局/default.vue

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

错误消失了

推荐阅读