无效的组件名称：“pages/product/_slug.vue”。组件名称应符合 html5 规范中的有效自定义元素名称答案

【问题标题】：Invalid component name: "pages/product/_slug.vue". Component names should conform to valid custom element name in html5 specification无效的组件名称：“pages/product/_slug.vue”。组件名称应符合 html5 规范中的有效自定义元素名称
【发布时间】：2020-05-26 21:20:57
【问题描述】：

我正在使用 Nuxt.js 并且有一些动态路由。我的文件夹结构是这样的：

- pages
 - product
  - _slug.vue

我像这样链接到路线：

<nuxt-link :to="{ name: 'product-slug', params: { slug: product.slug } }">

它工作正常，它显示了正确的 URL，也可以很好地引导页面，但是，我的控制台中出现了一个恼人的红色错误：

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

我发现了这个问题，但收效甚微：https://github.com/nuxt/nuxt.js/issues/165

【问题讨论】：

你试过<nuxt-link :to="{ name: 'product/slug', params: { slug: product.slug } }">吗？

标签： javascript vue.js routing vue-router nuxt.js

【解决方案1】：

如果您在组件中有名称，请删除名称之间的空格。例如

export default {
  name: 'Assign Role'
}

改成：

export default {
  name: 'AssignRole',
}

【讨论】：

如果您没有从该文件导出，则添加它
他是对的。当您未在组件中指定“名称”时，Nuxt 将路径分配为名称。您需要添加：export default { name: 'componentName', ... } 以修复警告。

【解决方案2】：

此错误信息的原因是_slug.vue组件的名称与文件名相同。

我希望它 name='_slug.vue' 你需要将其更改为类似 name='ProductItem' 的东西

【讨论】：

【解决方案3】：

我不确定这是一个错误还是什么。

但是在给我的组件命名之后，修复了这个问题如下。

  export default {
    name: 'NameOfTheCompnent',
    ...
  }

【讨论】：