Skip to content

Commit

Permalink
fix(types): fix VueRouter.NavigationFailureType
Browse files Browse the repository at this point in the history
  • Loading branch information
posva committed Sep 4, 2020
1 parent c69ff7b commit ecc8e27
Show file tree
Hide file tree
Showing 4 changed files with 14 additions and 9 deletions.
7 changes: 4 additions & 3 deletions docs/guide/advanced/navigation-failures.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,15 +11,16 @@ When using `router-link`, Vue Router calls `router.push` to trigger a navigation
When using a `router-link` component, **none of these failures will log an error**. However, if you are using `router.push` or `router.replace`, you might come across an _"Uncaught (in promise) Error"_ message followed by a more specific message in your console. Let's understand how to differentiate _Navigation Failures_.

::: tip Background story
In v3.2.0, _Navigation Failures_ were exposed through the two optional callbacks of `router.push`: `onComplete` and `onAbort`. Since version 3.1.0, `router.push` and `router.replace` return a _Promise_ if no `onComplete`/`onAbort` callback is provided. This _Promise_ resolves instead of invoking `onComplete` and rejects instead of invoking `onAbort`.
:::
In v3.2.0, _Navigation Failures_ were exposed through the two optional callbacks of `router.push`: `onComplete` and `onAbort`. Since version 3.1.0, `router.push` and `router.replace` return a _Promise_ if no `onComplete`/`onAbort` callback is provided. This _Promise_ resolves instead of invoking `onComplete` and rejects instead of invoking `onAbort`.
:::

## Detecting Navigation Failures

_Navigation Failures_ are `Error` instances with a few extra properties. To check if an error comes from the Router, use the `isNavigationFailure` function:

```js
import { NavigationFailureType, isNavigationFailure } from 'vue-router'
import VueRouter from 'vue-router'
const { isNavigationFailure, NavigationFailureType } = VueRouter

// trying to access the admin page
router.push('/admin').catch(failure => {
Expand Down
2 changes: 2 additions & 0 deletions test/unit/specs/error-handling.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,8 @@ describe('error handling', () => {
router.push('/foo')
router.push('/foo').catch(err => {
expect(err.type).toBe(NavigationFailureType.duplicated)
expect(VueRouter.isNavigationFailure(err)).toBe(true)
expect(VueRouter.isNavigationFailure(err, NavigationFailureType.duplicated)).toBe(true)
done()
})
})
Expand Down
12 changes: 7 additions & 5 deletions types/router.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -67,14 +67,16 @@ export declare class VueRouter {
error: any,
type?: number
) => error is NavigationFailure
static NavigationFailureType: NavigationFailureType
static NavigationFailureType: {
[k in keyof typeof NavigationFailureType]: NavigationFailureType
}
}

export enum NavigationFailureType {
redirected= 2,
aborted= 4,
cancelled= 8,
duplicated= 16
redirected = 2,
aborted = 4,
cancelled = 8,
duplicated = 16
}

export interface NavigationFailure extends Error {
Expand Down
2 changes: 1 addition & 1 deletion types/test/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ const Abc = { template: '<div>abc</div>' }
const Async = () => Promise.resolve({ template: '<div>async</div>' })

let err: any
if (VueRouter.isNavigationFailure(err, NavigationFailureType.aborted)) {
if (VueRouter.isNavigationFailure(err, VueRouter.NavigationFailureType.aborted)) {
err.from.fullPath.split('/')
}

Expand Down

0 comments on commit ecc8e27

Please sign in to comment.