Vue-Router4 4/类型记录“没有过载匹配此调用”

Question

我试图使用类型记录将多个vue-路由器4 file.ts连接到主vue-路由器(index.ts)，但是它给出了错误"TS2769:没有重载匹配此调用“。重载2中的1，'(...items: ConcatArray[])：never[]'，给出以下错误。类型'RouteRecordRaw[]‘的参数不能分配给'ConcatArray’类型的参数。由片(.)返回的类型在这些类型之间不兼容。键入'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

问题是[]没有输入。

解决这一问题的一种方法是在类型断言上使用[]

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);

一个更简洁的方法是展开阵列

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";

我也有同样的问题，几分钟前就修好了。