diff --git a/src/components/routerView.browser.spec.ts b/src/components/routerView.browser.spec.ts index 4d587547..7796e6e0 100644 --- a/src/components/routerView.browser.spec.ts +++ b/src/components/routerView.browser.spec.ts @@ -644,7 +644,7 @@ test('Renders the rejection component when the rejection is not registered on th const myRejection = createRejection({ type: 'myRejection', component: { - template: rejectionText + template: rejectionText, }, }) @@ -678,4 +678,4 @@ test('Renders the rejection component when the rejection is not registered on th await flushPromises() expect(wrapper.text()).toBe(rejectionText) -}) \ No newline at end of file +}) diff --git a/src/components/routerView.ts b/src/components/routerView.ts index 3f2ad0a0..8ead9957 100644 --- a/src/components/routerView.ts +++ b/src/components/routerView.ts @@ -3,7 +3,7 @@ import { createUseRejection } from '@/compositions/useRejection' import { createUseRoute } from '@/compositions/useRoute' import { createUseRouter } from '@/compositions/useRouter' import { createUseRouterDepth } from '@/compositions/useRouterDepth' -import { RouterRejection } from '@/types/rejection' +import { isRejection, RouterRejection } from '@/types/rejection' import { RouterRoute } from '@/types/routerRoute' import { Router } from '@/types/router' import { Component, computed, defineComponent, EmitsOptions, h, InjectionKey, onServerPrefetch, SetupContext, SlotsType, UnwrapRef, VNode } from 'vue' @@ -46,8 +46,8 @@ export function createRouterView(routerKey: InjectionKey return null } - if (rejection.value) { - return rejection.value.component + if (isRejection(rejection.value) && !!rejection.value.route.matched.component) { + return rejection.value.route.matched.component } const match = route.matches.at(depth) diff --git a/src/services/createRejection.ts b/src/services/createRejection.ts index ea9a193d..1f82f485 100644 --- a/src/services/createRejection.ts +++ b/src/services/createRejection.ts @@ -11,13 +11,12 @@ export function createRejection(options: { component?: Component, }): Rejection & RejectionHooks & RouteSetTitle -export function createRejection(options: { type: string, component?: Component }): Rejection { +export function createRejection({ type, component }: { type: string, component?: Component }): Rejection { const { store, ...hooks } = createRejectionHooks() - const component = markRaw(options.component ?? genericRejection(options.type)) const route = createRoute({ - name: options.type, - component, + name: type, + component: markRaw(component ?? genericRejection(type)), }) const { setTitle } = route @@ -29,8 +28,7 @@ export function createRejection(options: { type: string, component?: Component } } satisfies RejectionInternal const rejection = { - type: options.type, - component, + type, setTitle, ...hooks, ...internal, diff --git a/src/types/rejection.ts b/src/types/rejection.ts index 7607adb9..3e328839 100644 --- a/src/types/rejection.ts +++ b/src/types/rejection.ts @@ -1,4 +1,4 @@ -import { Component, Ref } from 'vue' +import { Ref } from 'vue' import { Route } from '@/types/route' import { Router } from '@/types/router' import { RouterReject } from '@/types/routerReject' @@ -32,10 +32,6 @@ export type Rejection = { * The type of rejection. */ type: TType, - /** - * The component to render when the rejection occurs. - */ - component: Component, } export type RejectionType =