CODEWITHSUNDEEP
typescriptvue.jsvue-router
livreson ltc
livreson ltc

Reputation: 733

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

I'm trying to caoncatinate multiple vue-router 4 file.ts to the main vue-router(index.ts) using typescript, but it gives the error "TS2769: No overload matches this call. Overload 1 of 2, '(...items: ConcatArray[]): never[]', gave the following error. Argument of type 'RouteRecordRaw[]' is not assignable to parameter of type 'ConcatArray'. The types returned by 'slice(...)' are incompatible between these types. Type 'RouteRecordRaw[]' is not assignable to type 'never[]'...."

Here is my files.

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(Main Router)

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;

Upvotes: 1

Views: 4107

Answers (2)

GeeWhizBang
GeeWhizBang

Reputation: 857

You need to split out the RouteRecordRaw and import it as a type, which is what it is:

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

I had the same problem, just fixed it a few minutes ago.

Upvotes: 1

tony19
tony19

Reputation: 138506

The problem is [] is not typed.

One way to fix this is to use type assertion on the []:

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

A more succinct way is to spread the arrays:

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

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

Upvotes: 2

Related Questions