fix(errors): NavigationCanceled with async components (#3211)

lbwa · web-flow · commit be39ca39e4d4 · 2020-05-29T15:34:54.000+02:00
diff --git a/src/history/base.js b/src/history/base.js
@@ -200,7 +200,7 @@ export class History {
       const queue = enterGuards.concat(this.router.resolveHooks)
       runQueue(queue, iterator, () => {
         if (this.pending !== route) {
-          return abort()
+          return abort(createNavigationCancelledError(current, route))
         }
         this.pending = null
         onComplete(route)
diff --git a/test/unit/specs/error-handling.spec.js b/test/unit/specs/error-handling.spec.js
@@ -9,7 +9,7 @@ describe('error handling', () => {
     const router = new VueRouter()
     const err = new Error('foo')
     router.beforeEach(() => { throw err })
-    router.onError(() => {})
+    router.onError(() => { })
 
     const onReady = jasmine.createSpy('ready')
     const onError = jasmine.createSpy('error')
@@ -65,6 +65,26 @@ describe('error handling', () => {
     router.push('/')
   })
 
+  it('NavigationCancelled error for nested async navigation', (done) => {
+    const component = {
+      template: `<img />`,
+      beforeRouteEnter (to, from, next) {
+        setTimeout(() => next(), 100)
+      }
+    }
+    const router = new VueRouter({
+      routes: [
+        { path: '/a', component }
+      ]
+    })
+
+    router.push('/a').catch(err => {
+      expect(err.type).toBe(NavigationFailureType.cancelled)
+      done()
+    })
+    router.push('/')
+  })
+
   it('NavigationRedirected error', done => {
     const router = new VueRouter()
 
@@ -105,7 +125,7 @@ describe('error handling', () => {
     })
 
     router.onError(spy1)
-    router.onReady(() => {}, spy2)
+    router.onReady(() => { }, spy2)
 
     router.push('/').catch(spy3).finally(() => {
       expect(spy1).toHaveBeenCalledWith(err)

Original file line number	Diff line number	Diff line change
`@@ -200,7 +200,7 @@ export class History {`
`200`	`200`	`const queue = enterGuards.concat(this.router.resolveHooks)`
`201`	`201`	`runQueue(queue, iterator, () => {`
`202`	`202`	`if (this.pending !== route) {`
`203`		`- return abort()`
	`203`	`+ return abort(createNavigationCancelledError(current, route))`
`204`	`204`	`}`
`205`	`205`	`this.pending = null`
`206`	`206`	`onComplete(route)`