Vue-Router4/TypeScript "No overload matches this call"

Question

我正在尝试使用打字稿将多个 vue-router 4 file.ts 连接到主 vue-router(index.ts)，但它给出了错误“TS2769：没有与此调用匹配的过载。重载 1 of 2，'(...items: ConcatArray[]): never[]'，出现以下错误。 'RouteRecordRaw[]' 类型的参数不可分配给 'ConcatArray' 类型的参数。 'slice(...)' 返回的类型在这些类型之间不兼容。类型 'RouteRecordRaw[]' 不可分配给类型 'never[]'..."

这是我的文件。

DashboardRouter.ts

import { RouteRecordRaw } from "vue-router";
const DashboardRouter: Array<RouteRecordRaw> = [
{
  path: "/",
  redirect: "/dashboard",
  component: () => import("@/layout/Layout.vue"),
  children: [
    {
      path: "/dashboard",
      name: "dashboard",
      component: () => import("@/views/Dashboard.vue"),
     },
   ]
  },
];
export default DashboardRouter;

GuestRouter.ts

import { RouteRecordRaw } from "vue-router";
const GuestRouter: Array<RouteRecordRaw> = [
  {
    path: "/login",
    name: "login",
    component: () => import("@/views/auth/Login.vue")
  },
  {
    path: "/password-reset",
    name: "password-reset",
    component: () => import("@/views/auth/PasswordReset.vue")
  },
  {
   // the 404 route, when none of the above matches
    path: "/404",
    name: "error-404",
    component: () => import("@/views/error/Error404.vue")
  },
  {
    path: "/:pathMatch(.*)*",
    redirect: "/404"
  }
];
export default GuestRouter;

Index.ts（主路由器）

import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
import store from "@/store";
import { Mutations, Actions } from "@/store/enums/StoreEnums";
import DashboardRoute from "./DashboardRouter";
import GuestRoute from "./GuestRouter";

const routes: Array<RouteRecordRaw> = [].concat(GuestRoute, DashboardRoute);

const router = createRouter({
  history: createWebHistory(),
  routes
});

router.beforeEach(() => {
  // reset config to initial state
  store.commit(Mutations.RESET_LAYOUT_CONFIG);

  // Scroll page to top on every route change
  setTimeout(() => {
    window.scrollTo(0, 0);
  }, 100);
});    
export default router;

Answer 1

问题是 [] 没有输入。

解决此问题的一种方法是在 []:

上使用 type assertion

const routes: Array<RouteRecordRaw> = ([] as Array<RouteRecordRaw>).concat(GuestRoute, DashboardRoute);

// or
const routes = ([] as Array<RouteRecordRaw>).concat(GuestRoute, DashboardRoute);

// or
const routes = ([] as RouteRecordRaw[]).concat(GuestRoute, DashboardRoute);

更简洁的方法是 spread the arrays:

const routes: Array<RouteRecordRaw> = [...GuestRoute, ...DashboardRoute];

// or
const routes: RouteRecordRaw[] = [...GuestRoute, ...DashboardRoute];

Answer 2

你需要把RouteRecordRaw拆分出来，作为类型导入，就是这样：

import { createWebHistory, createRouter } from "vue-router";
import type { RouteRecordRaw } from "vue-router";

我遇到了同样的问题，几分钟前刚刚解决了。

Vue-Router4/TypeScript "No overload matches this call"

Vue-Router4/TypeScript "No overload matches this call"

typescript

vue.js

vue-router