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

Posted 2023-02-22

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

【英文标题】：Invalid component name: "pages/product/_slug.vue". Component names should conform to valid custom element name in html5 specification

【发布时间】：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 ">吗？

【参考方案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',
    ...