vue-router meta类型引发的Ts错误~

139 阅读1分钟

你们好,我是金金金。

image.png

场景

image.png

  • 我是在处理路由数据的时候,ts提示报了这个error,类型{}上不存在includes,可以得知route.meta.roles是个空的,我们来一下meta的类型

排查

可以看到meta是一个RouteMeta类型,并且meta是个可选属性。

image.png

我们来看看RouteMeta到底什么呢?

image.png

  • 可以很清晰的看见RouteMeta是一个对象,继承扩展了Record<string | number | symbol, unknown>类型,从而使得key可以是string | number | symbol类型,值可以是unknown任意类型

造成error的原因

  • 排查中发现,RouteMeta其实是一个空对象所导致。

解决

  • 源码里面的注释其实也写得很清楚了,因为meta会放什么属性谁都不知道,源码给我们定义好了,后面具体属性需要我们自己去上面添加扩展。

这时候需要用到ts中的模块扩展了,我们需要给vue-router这个模块加上我们所需要的属性 这样ts就可以识别到了也就能解决问题。参考源码注释里面的例子 写就完事了。

  1. 声明一个vue-router.d.ts文件

  2. 编写ts代码

image.png

  • 编写有误还请大佬指正,万分感谢。