Vue-router报错Argument of type ... is not assignable to parameter of type 'RouterOptions'的解决方案

最新推荐文章于 2025-07-23 09:28:30 发布

原创

最新推荐文章于 2025-07-23 09:28:30 发布 · 4.5w 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#Vue #TypeScript #Vue-router

这个问题说起来也奇怪，之前一直用得好好的，打包的时候突然router就报错了。报错信息很长，其中最主要的就是这一段：

  Argument of type '{...（中间一大段代码略过）}' is not assignable to parameter of type 'RouterOptions'.
  Types of property 'routes' are incompatible.

这种报错一看就是TS的类型异常。修复这个bug也很容易，只需要进行一次类型转换就好了：

const router = new Router({
    mode: 'history',
    base: process.env.BASE_URL,
    routes
} as RouterOptions);

但是为什么呢？

（大段源码预警）

仔细分析一下，发现是升级vue-function-api到2.2.0之后出现了这个问题。2.2.0里对setup的返回值进行了修改，我们可以看看它的类型：

export declare function createComponent<PropsOptions, RawBindings>(options: ComponentOptions<PropsOptions, RawBindings>): VueProxy<PropsOptions, RawBindings>;

import { VueConstructor, VNode, ComponentOptions as Vue2ComponentOptions } from 'vue';

declare type VueProxy<PropsOptions, RawBindings> = Vue2ComponentOptions<never, UnwrapValue<Ra