首页 前端知识 Invalid xxx In Component names shouldconform to valid custom element name in html5 specification解决方案

Invalid xxx In Component names shouldconform to valid custom element name in html5 specification解决方案

2024-06-04 10:06:14 前端知识 前端哥 620 10 我要收藏

发现如图错误,虽然是警告,但是还是想把他搞掉,有些时候感觉自己有强迫症一样

 这个报错其实就是一个规范问题,vue文件的name的命名不规范引起的。

如下方代码所示,这是错误代码:

export default {
  name: "0013083e8f4e46c5ac4348b562158025",

根据 HTML5 规范,自定义元素的名称必须符合一定的规则,否则将报错。

根据 HTML5 规范,自定义元素的名称需要满足以下规范

  1. 组件名称必须以字母开头,并且只能包含字母、数字和连字符(-)
  2. 组件名称不能以连字符(-)开头或结尾
export default {
  name: "abc123",  //符合规范

export default {
  name: "123abc",   //Vue warn

export default {
  name: "abc-123",   //符合规范

export default {
  name: "-123abc",   //Vue warn

 但是呢,这个是用户登录时从接口获取到路由的数据的,返回的是路由地址加密的字符串。有的加密后返给你的是以数字开头的,所以不符合规范

因为拿到的路由数据存在了本地,当我们获取后,直接在Vuex修改拿到的数据,比如利用for in对对象进行循环,给每个键的值最前面增加同一个字母a,然后就变成下面的样子了。

已符合规范

export default {
  name: "a0013083e8f4e46c5ac4348b562158025",

虽然问题解决了,但又有新问题了。由于后面在页面中需要增加页面缓存,而这个name,虽然还是唯一标识,但是和后台给我的不一样了,因为我们这个的缓存就是通过这个name标识来控制的(这个标识不是用来控制菜单权限的),当我们给需要的菜单开启缓存功能的时候,数据是要提交到后台的,数据匹配不上肯定失效啦

现在有两种可选:

1.name的值还原为开始的,但是页面会报黄(就是警告,不影响运行项目及流程) 

2.前台需要和后台沟通,让返回的加密字符串不会以数字开头,尽量符合H5规范\(^o^)/~

直接说你接口返给我的数据不符合规范,剩下的就交给万能的后台大哥了,又到了甩锅时刻。

\(^o^)/~\(^o^)/~\(^o^)/~\(^o^)/~\(^o^)/~\(^o^)/~\(^o^)/~\(^o^)/~\(^o^)/~\(^o^)/~\(^o^)/~\(^o^)/~\(^o^)/~

转载请注明出处或者链接地址:https://www.qianduange.cn//article/10784.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!