{
components: { default: components.Home },
instances: {},
+ enterCallbacks: [],
path: '/',
props,
},
{
components: { default: components.Foo },
instances: {},
+ enterCallbacks: [],
path: '/foo',
props,
},
{
components: { default: components.Nested },
instances: {},
+ enterCallbacks: [],
path: '/',
props,
},
{
components: { default: components.Foo },
instances: {},
+ enterCallbacks: [],
path: 'a',
props,
},
{
components: { default: components.Nested },
instances: {},
+ enterCallbacks: [],
path: '/',
props,
},
{
components: { default: components.Nested },
instances: {},
+ enterCallbacks: [],
path: 'a',
props,
},
{
components: { default: components.Foo },
instances: {},
+ enterCallbacks: [],
path: 'b',
props,
},
hash: '',
meta: {},
matched: [
- { components: { foo: components.Foo }, instances: {}, path: '/', props },
+ {
+ components: { foo: components.Foo },
+ instances: {},
+ enterCallbacks: [],
+ path: '/',
+ props,
+ },
],
},
withParams: {
components: { default: components.User },
instances: {},
+ enterCallbacks: [],
path: '/users/:id',
props: { default: true },
},
components: { default: components.WithProps },
instances: {},
+ enterCallbacks: [],
path: '/props/:id',
props: { default: { id: 'foo', other: 'fixed' } },
},
components: { default: components.WithProps },
instances: {},
+ enterCallbacks: [],
path: '/props/:id',
props: {
default: (to: RouteLocationNormalized) => ({
{
components: { default: components.User },
instances: {},
+ enterCallbacks: [],
path: '/users/:id',
props,
},
// should hang
let navigationPromise = router.push('/foo')
+ expect(afterEach).toHaveBeenCalledTimes(0)
await expect(router.push('/')).resolves.toEqual(undefined)
- expect(afterEach).toHaveBeenCalledTimes(1)
expect(onError).toHaveBeenCalledTimes(0)
resolve()
expect(afterEach).toHaveBeenCalledTimes(2)
expect(onError).toHaveBeenCalledTimes(0)
- expect(afterEach).toHaveBeenLastCalledWith(
+ expect(afterEach).toHaveBeenNthCalledWith(
+ 1,
expect.objectContaining({ path: '/foo' }),
from,
expect.objectContaining({ type: NavigationFailureType.cancelled })
let navigationPromise = router.push('/bar')
// goes from /foo to /
+ expect(afterEach).toHaveBeenCalledTimes(0)
history.go(-1)
await tick()
- expect(afterEach).toHaveBeenCalledTimes(1)
expect(onError).toHaveBeenCalledTimes(0)
- expect(afterEach).toHaveBeenLastCalledWith(
- expect.objectContaining({ path: '/' }),
- from,
- undefined
- )
-
resolve()
await expect(navigationPromise).resolves.toEqual(
expect.objectContaining({ type: NavigationFailureType.cancelled })
expect(afterEach).toHaveBeenCalledTimes(2)
expect(onError).toHaveBeenCalledTimes(0)
- expect(afterEach).toHaveBeenLastCalledWith(
+ expect(afterEach).toHaveBeenNthCalledWith(
+ 1,
expect.objectContaining({ path: '/bar' }),
from,
expect.objectContaining({ type: NavigationFailureType.cancelled })
)
+
+ expect(afterEach).toHaveBeenNthCalledWith(
+ 2,
+ expect.objectContaining({ path: '/' }),
+ from,
+ undefined
+ )
})
it('next(false) triggers afterEach with history.back', async () => {
await p
expect(router.currentRoute.value.fullPath).toBe('/foo')
})
-
- // TODO: wait until we have something working with keep-alive and transition first
- it.skip('calls next callback', async done => {
- const router = createRouter({ routes })
- beforeRouteEnter.mockImplementationOnce((to, from, next) => {
- next(vm => {
- expect(router.currentRoute.value.fullPath).toBe('/foo')
- expect(vm).toBeTruthy()
- done()
- })
- })
-
- await router.push('/')
- await router.push('/guard/2')
- })
-
- it.skip('calls next callback after waiting', async done => {
- const [promise, resolve] = fakePromise()
- const router = createRouter({ routes })
- beforeRouteEnter.mockImplementationOnce(async (to, from, next) => {
- await promise
- next(vm => {
- expect(router.currentRoute.value.fullPath).toBe('/foo')
- expect(vm).toBeTruthy()
- done()
- })
- })
- router.push('/foo')
- resolve()
- })
})
path: '/home',
component: {},
})
- expect(record).toEqual({
+ expect(record).toMatchObject({
beforeEnter: undefined,
children: [],
aliasOf: undefined,
name: 'name',
component: {},
})
- expect(record).toEqual({
+ expect(record).toMatchObject({
beforeEnter,
children: [{ path: '/child' }],
components: { default: {} },
name: 'name',
components: { one: {} },
})
- expect(record).toEqual({
+ expect(record).toMatchObject({
beforeEnter,
children: [{ path: '/child' }],
components: { one: {} },
> {
leaveGuards?: any
instances: Record<string, any>
+ enterCallbacks: Function[]
props: Record<string, _RouteRecordProps>
aliasOf: RouteRecordViewLoose | undefined
}
const WithGuards: RouteComponent = {
template: `<div>
+ <p>Enter Count <span id="enter-count">{{ enterCount }}</span></p>
<p>Update Count <span id="update-count">{{ updateCount }}</span></p>
<p>Leave Count <span id="leave-count">{{ leaveCount }}</span></p>
<button id="change-query" @click="changeQuery">Change query</button>
<button id="reset" @click="reset">Reset</button>
</div>`,
+ beforeRouteEnter(to, from, next) {
+ next(vm => {
+ ;(vm as any).enterCount++
+ })
+ },
+
beforeRouteUpdate(to, from, next) {
this.updateCount++
next()
},
setup() {
+ const enterCount = ref(0)
const updateCount = ref(0)
const leaveCount = ref(0)
const router = useRouter()
function reset() {
+ enterCount.value = 0
updateCount.value = 0
leaveCount.value = 0
}
return {
reset,
changeQuery,
+ enterCount,
updateCount,
leaveCount,
}
.assert.containsText('#counter', '1')
.click('li:nth-child(3) a')
+ .assert.containsText('#enter-count', '1')
.assert.containsText('#update-count', '0')
.click('#change-query')
+ .assert.containsText('#enter-count', '1')
.assert.containsText('#update-count', '1')
.back()
.assert.containsText('#update-count', '2')
.back()
.assert.containsText('#counter', '1')
.forward()
+ .assert.containsText('#enter-count', '2')
.assert.containsText('#update-count', '2')
.assert.containsText('#leave-count', '1')
const currentName = props.name
const onVnodeMounted = () => {
matchedRoute.instances[currentName] = viewRef.value
- // TODO: trigger beforeRouteEnter hooks
+ matchedRoute.enterCallbacks.forEach(callback =>
+ callback(viewRef.value!)
+ )
}
const onVnodeUnmounted = () => {
// remove the instance reference to prevent leak
RouteLocationNormalized,
} from './types'
import { assign } from './utils'
+import { PolySymbol } from './injectionSymbols'
/**
- * order is important to make it backwards compatible with v3
+ * Flags so we can combine them when checking for multiple errors
*/
export const enum ErrorTypes {
- MATCHER_NOT_FOUND = 0,
- NAVIGATION_GUARD_REDIRECT = 1,
- NAVIGATION_ABORTED = 2,
- NAVIGATION_CANCELLED = 3,
- NAVIGATION_DUPLICATED = 4,
+ // they must be literals to be used as values so we can't write
+ // 1 << 2
+ MATCHER_NOT_FOUND = 1,
+ NAVIGATION_GUARD_REDIRECT = 2,
+ NAVIGATION_ABORTED = 4,
+ NAVIGATION_CANCELLED = 8,
+ NAVIGATION_DUPLICATED = 16,
}
+const NavigationFailureSymbol = PolySymbol(
+ __DEV__ ? 'navigation failure' : 'nf'
+)
+
interface RouterErrorBase extends Error {
type: ErrorTypes
}
if (__DEV__ || !__BROWSER__) {
return assign(
new Error(ErrorTypeMessages[type](params as any)),
- { type },
+ {
+ type,
+ [NavigationFailureSymbol]: true,
+ } as { type: typeof type },
params
) as E
} else {
- return assign(new Error(), { type }, params) as E
+ return assign(
+ new Error(),
+ {
+ type,
+ [NavigationFailureSymbol]: true,
+ } as { type: typeof type },
+ params
+ ) as E
}
}
+export function isNavigationFailure(
+ error: any,
+ type: ErrorTypes.NAVIGATION_GUARD_REDIRECT
+): error is NavigationRedirectError
+export function isNavigationFailure(
+ error: any,
+ type: ErrorTypes
+): error is NavigationFailure
+export function isNavigationFailure(
+ error: any,
+ type?: number
+): error is NavigationFailure {
+ return (
+ NavigationFailureSymbol in error &&
+ (type == null || !!((error as NavigationFailure).type & type))
+ )
+}
+
const propertiesToLog = ['params', 'query', 'hash'] as const
function stringifyRoute(to: RouteLocationRaw): string {
instances: {},
leaveGuards: [],
updateGuards: [],
+ enterCallbacks: [],
components:
'components' in record
? record.components || {}
NavigationGuard,
_RouteRecordBase,
_RouteRecordProps,
+ NavigationGuardNextCallback,
} from '../types'
import { ComponentPublicInstance } from 'vue'
beforeEnter: RouteRecordMultipleViews['beforeEnter']
leaveGuards: NavigationGuard[]
updateGuards: NavigationGuard[]
+ enterCallbacks: NavigationGuardNextCallback[]
instances: Record<string, ComponentPublicInstance | undefined | null>
// can only be of of the same type as this record
aliasOf: RouteRecordNormalized | undefined
guard: NavigationGuard,
to: RouteLocationNormalized,
from: RouteLocationNormalizedLoaded,
- instance?: ComponentPublicInstance | undefined | null
+ instance?: ComponentPublicInstance | undefined | null,
+ record?: RouteRecordNormalized
): () => Promise<void> {
+ // keep a reference to the enterCallbackArray to prevent pushing callbacks if a new navigation took place
+ const enterCallbackArray = record && record.enterCallbacks
return () =>
new Promise((resolve, reject) => {
const next: NavigationGuardNext = (
)
)
} else {
- // TODO: call the in component enter callbacks. Maybe somewhere else
- // record && record.enterCallbacks.push(valid)
+ if (
+ record &&
+ record.enterCallbacks === enterCallbackArray &&
+ typeof valid === 'function'
+ )
+ enterCallbackArray.push(valid)
resolve()
}
}
(rawComponent as any).__vccOpts || rawComponent
const guard = options[guardType]
guard &&
- guards.push(guardToPromiseFn(guard, to, from, record.instances[name]))
+ guards.push(
+ guardToPromiseFn(guard, to, from, record.instances[name], record)
+ )
} else {
// start requesting the chunk already
let componentPromise: Promise<RouteComponent | null> = (rawComponent as Lazy<
const guard: NavigationGuard = resolvedComponent[guardType]
return (
guard &&
- guardToPromiseFn(guard, to, from, record.instances[name])()
+ guardToPromiseFn(
+ guard,
+ to,
+ from,
+ record.instances[name],
+ record
+ )()
)
})
)
ErrorTypes,
NavigationFailure,
NavigationRedirectError,
+ isNavigationFailure,
} from './errors'
import { applyToParams, isBrowser, assign } from './utils'
import { useCallbacks } from './utils/callbacks'
return typeof to === 'string' ? { path: to } : assign({}, to)
}
+ function checkCanceledNavigation(
+ to: RouteLocationNormalized,
+ from: RouteLocationNormalized
+ ): NavigationFailure | void {
+ if (pendingLocation !== to) {
+ return createRouterError<NavigationFailure>(
+ ErrorTypes.NAVIGATION_CANCELLED,
+ {
+ from,
+ to,
+ }
+ )
+ }
+ }
+
function push(to: RouteLocationRaw | RouteLocation) {
return pushWithRedirect(to)
}
return (failure ? Promise.resolve(failure) : navigate(toLocation, from))
.catch((error: NavigationFailure | NavigationRedirectError) => {
- // a more recent navigation took place
- if (pendingLocation !== toLocation) {
- return createRouterError<NavigationFailure>(
- ErrorTypes.NAVIGATION_CANCELLED,
- {
- from,
- to: toLocation,
- }
- )
- }
if (
- error.type === ErrorTypes.NAVIGATION_ABORTED ||
- error.type === ErrorTypes.NAVIGATION_GUARD_REDIRECT
+ isNavigationFailure(
+ error,
+ ErrorTypes.NAVIGATION_ABORTED |
+ ErrorTypes.NAVIGATION_CANCELLED |
+ ErrorTypes.NAVIGATION_GUARD_REDIRECT
+ )
) {
return error
}
})
.then((failure: NavigationFailure | NavigationRedirectError | void) => {
if (failure) {
- if (failure.type === ErrorTypes.NAVIGATION_GUARD_REDIRECT)
+ if (
+ isNavigationFailure(failure, ErrorTypes.NAVIGATION_GUARD_REDIRECT)
+ )
// preserve the original redirectedFrom if any
return pushWithRedirect(
// keep options
})
}
+ /**
+ * Helper to reject and skip all navigation guards if a new navigation happened
+ * @param to
+ * @param from
+ */
+ function checkCanceledNavigationAndReject(
+ to: RouteLocationNormalized,
+ from: RouteLocationNormalized
+ ): Promise<void> {
+ const error = checkCanceledNavigation(to, from)
+ return error ? Promise.reject(error) : Promise.resolve()
+ }
+
+ // TODO: refactor the whole before guards by internally using router.beforeEach
+
function navigate(
to: RouteLocationNormalized,
from: RouteLocationNormalizedLoaded
}
}
- // run the queue of per route beforeRouteLeave guards
- return runGuardQueue(guards)
- .then(() => {
- // check global guards beforeEach
- guards = []
- for (const guard of beforeGuards.list()) {
- guards.push(guardToPromiseFn(guard, to, from))
- }
+ const canceledNavigationCheck = checkCanceledNavigationAndReject.bind(
+ null,
+ to,
+ from
+ )
- return runGuardQueue(guards)
- })
- .then(() => {
- // check in components beforeRouteUpdate
- guards = extractComponentsGuards(
- to.matched.filter(record => from.matched.indexOf(record as any) > -1),
- 'beforeRouteUpdate',
- to,
- from
- )
+ guards.push(canceledNavigationCheck)
- for (const record of updatingRecords) {
- for (const guard of record.updateGuards) {
+ // run the queue of per route beforeRouteLeave guards
+ return (
+ runGuardQueue(guards)
+ .then(() => {
+ // check global guards beforeEach
+ guards = []
+ for (const guard of beforeGuards.list()) {
guards.push(guardToPromiseFn(guard, to, from))
}
- }
+ guards.push(canceledNavigationCheck)
- // run the queue of per route beforeEnter guards
- return runGuardQueue(guards)
- })
- .then(() => {
- // check the route beforeEnter
- guards = []
- for (const record of to.matched) {
- // do not trigger beforeEnter on reused views
- if (record.beforeEnter && from.matched.indexOf(record as any) < 0) {
- if (Array.isArray(record.beforeEnter)) {
- for (const beforeEnter of record.beforeEnter)
- guards.push(guardToPromiseFn(beforeEnter, to, from))
- } else {
- guards.push(guardToPromiseFn(record.beforeEnter, to, from))
+ return runGuardQueue(guards)
+ })
+ .then(() => {
+ // check in components beforeRouteUpdate
+ guards = extractComponentsGuards(
+ to.matched.filter(
+ record => from.matched.indexOf(record as any) > -1
+ ),
+ 'beforeRouteUpdate',
+ to,
+ from
+ )
+
+ for (const record of updatingRecords) {
+ for (const guard of record.updateGuards) {
+ guards.push(guardToPromiseFn(guard, to, from))
}
}
- }
+ guards.push(canceledNavigationCheck)
- // run the queue of per route beforeEnter guards
- return runGuardQueue(guards)
- })
- .then(() => {
- // NOTE: at this point to.matched is normalized and does not contain any () => Promise<Component>
-
- // check in-component beforeRouteEnter
- guards = extractComponentsGuards(
- // the type doesn't matter as we are comparing an object per reference
- to.matched.filter(record => from.matched.indexOf(record as any) < 0),
- 'beforeRouteEnter',
- to,
- from
- )
+ // run the queue of per route beforeEnter guards
+ return runGuardQueue(guards)
+ })
+ .then(() => {
+ // check the route beforeEnter
+ guards = []
+ for (const record of to.matched) {
+ // do not trigger beforeEnter on reused views
+ if (record.beforeEnter && from.matched.indexOf(record as any) < 0) {
+ if (Array.isArray(record.beforeEnter)) {
+ for (const beforeEnter of record.beforeEnter)
+ guards.push(guardToPromiseFn(beforeEnter, to, from))
+ } else {
+ guards.push(guardToPromiseFn(record.beforeEnter, to, from))
+ }
+ }
+ }
+ guards.push(canceledNavigationCheck)
- // run the queue of per route beforeEnter guards
- return runGuardQueue(guards)
- })
- .then(() => {
- // check global guards beforeResolve
- guards = []
- for (const guard of beforeResolveGuards.list()) {
- guards.push(guardToPromiseFn(guard, to, from))
- }
+ // run the queue of per route beforeEnter guards
+ return runGuardQueue(guards)
+ })
+ .then(() => {
+ // NOTE: at this point to.matched is normalized and does not contain any () => Promise<Component>
+
+ // clear existing enterCallbacks, these are added by extractComponentsGuards
+ to.matched.forEach(record => (record.enterCallbacks = []))
+
+ // check in-component beforeRouteEnter
+ guards = extractComponentsGuards(
+ // the type doesn't matter as we are comparing an object per reference
+ to.matched.filter(
+ record => from.matched.indexOf(record as any) < 0
+ ),
+ 'beforeRouteEnter',
+ to,
+ from
+ )
+ guards.push(canceledNavigationCheck)
- return runGuardQueue(guards)
- })
+ // run the queue of per route beforeEnter guards
+ return runGuardQueue(guards)
+ })
+ .then(() => {
+ // check global guards beforeResolve
+ guards = []
+ for (const guard of beforeResolveGuards.list()) {
+ guards.push(guardToPromiseFn(guard, to, from))
+ }
+ guards.push(canceledNavigationCheck)
+
+ return runGuardQueue(guards)
+ })
+ // catch any navigation canceled
+ .catch(err =>
+ isNavigationFailure(err, ErrorTypes.NAVIGATION_CANCELLED)
+ ? err
+ : Promise.reject(err)
+ )
+ )
}
function triggerAfterEach(
data?: HistoryState
): NavigationFailure | void {
// a more recent navigation took place
- if (pendingLocation !== toLocation) {
- return createRouterError<NavigationFailure>(
- ErrorTypes.NAVIGATION_CANCELLED,
- {
- from,
- to: toLocation,
- }
- )
- }
+ const error = checkCanceledNavigation(toLocation, from)
+ if (error) return error
const [leavingRecords] = extractChangingRecords(toLocation, from)
for (const record of leavingRecords) {
navigate(toLocation, from)
.catch((error: NavigationFailure | NavigationRedirectError) => {
- // a more recent navigation took place
- if (pendingLocation !== toLocation) {
- return createRouterError<NavigationFailure>(
- ErrorTypes.NAVIGATION_CANCELLED,
- {
- from,
- to: toLocation,
- }
+ if (
+ isNavigationFailure(
+ error,
+ ErrorTypes.NAVIGATION_ABORTED | ErrorTypes.NAVIGATION_CANCELLED
)
+ ) {
+ return error
}
- if (error.type === ErrorTypes.NAVIGATION_ABORTED) {
- return error as NavigationFailure
- }
- if (error.type === ErrorTypes.NAVIGATION_GUARD_REDIRECT) {
+ if (
+ isNavigationFailure(error, ErrorTypes.NAVIGATION_GUARD_REDIRECT)
+ ) {
routerHistory.go(-info.delta, false)
// the error is already handled by router.push we just want to avoid
// logging the error
projects / thirdparty / vuejs / router.git / commitdiff
