发现如图错误,虽然是警告,但是还是想把他搞掉,有些时候感觉自己有强迫症一样
这个报错其实就是一个规范问题,vue文件的name的命名不规范引起的。
如下方代码所示,这是错误代码:
export default {
name: "0013083e8f4e46c5ac4348b562158025",
根据 HTML5 规范,自定义元素的名称必须符合一定的规则,否则将报错。
根据 HTML5 规范,自定义元素的名称需要满足以下规范:
- 组件名称必须以字母开头,并且只能包含字母、数字和连字符(-);
- 组件名称不能以连字符(-)开头或结尾。
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^)/~