From 893d86b3c45120d0e13f8b989d28dbbec57df493 Mon Sep 17 00:00:00 2001
From: Eduardo San Martin Morote <posva13@gmail.com>
Date: Thu, 24 Sep 2020 17:02:58 +0200
Subject: [PATCH] fix(history): mark redundant navigation as pending

Fix #3133
---
 examples/basic/app.js   | 12 ++++++++++++
 src/history/base.js     |  2 +-
 test/e2e/specs/basic.js | 18 ++++++++++++++++--
 3 files changed, 29 insertions(+), 3 deletions(-)

diff --git a/examples/basic/app.js b/examples/basic/app.js
index ba13679f2..2e22b6763 100644
--- a/examples/basic/app.js
+++ b/examples/basic/app.js
@@ -48,6 +48,16 @@ const router = new VueRouter({
   ]
 })
 
+router.beforeEach((to, from, next) => {
+  if (to.query.delay) {
+    setTimeout(() => {
+      next()
+    }, Number(to.query.delay))
+  } else {
+    next()
+  }
+})
+
 // 4. Create and mount root instance.
 // Make sure to inject the router.
 // Route components will be rendered inside <router-view>.
@@ -73,6 +83,8 @@ const vueInstance = new Vue({
           </li>
         </router-link>
         <li><router-link to="/foo" replace>/foo (replace)</router-link></li>
+        <li><router-link to="/?delay=200">/ (delay of 500ms)</router-link></li>
+        <li><router-link to="/foo?delay=200">/foo (delay of 500ms)</router-link></li>
       </ul>
       <button id="navigate-btn" @click="navigateAndIncrement">On Success</button>
       <pre id="counter">{{ n }}</pre>
diff --git a/src/history/base.js b/src/history/base.js
index 3397e8709..70158e395 100644
--- a/src/history/base.js
+++ b/src/history/base.js
@@ -137,6 +137,7 @@ export class History {
 
   confirmTransition (route: Route, onComplete: Function, onAbort?: Function) {
     const current = this.current
+    this.pending = route
     const abort = err => {
       // changed after adding errors with
       // https://github.com/vuejs/vue-router/pull/3047 before that change,
@@ -183,7 +184,6 @@ export class History {
       resolveAsyncComponents(activated)
     )
 
-    this.pending = route
     const iterator = (hook: NavigationGuard, next) => {
       if (this.pending !== route) {
         return abort(createNavigationCancelledError(current, route))
diff --git a/test/e2e/specs/basic.js b/test/e2e/specs/basic.js
index f4d7d6f51..25d3fed3f 100644
--- a/test/e2e/specs/basic.js
+++ b/test/e2e/specs/basic.js
@@ -9,8 +9,8 @@ module.exports = {
     browser
       .url('http://localhost:8080/basic/')
       .waitForElementVisible('#app', 1000)
-      .assert.count('li', 9)
-      .assert.count('li a', 9)
+      .assert.count('li', 11)
+      .assert.count('li a', 11)
       // assert correct href with base
       .assert.attributeContains('li:nth-child(1) a', 'href', '/basic/')
       .assert.attributeContains('li:nth-child(2) a', 'href', '/basic/foo')
@@ -76,5 +76,19 @@ module.exports = {
       .assert.containsText('#popstate-count', '0 popstate listeners')
 
       .end()
+  },
+
+  'cancelling ongoing navigations': function (browser) {
+    browser
+      .url('http://localhost:8080/basic/?delay=200')
+      .waitForElementVisible('#app', 1000)
+      .assert.containsText('.view', 'home')
+      // go to foo with a delay
+      .click('li:nth-child(11) a')
+      .click('li:nth-child(10) a')
+      .waitFor(300)
+      // we should stay at /basic after the delay
+      .assert.urlEquals('http://localhost:8080/basic/?delay=200')
+      .assert.containsText('.view', 'home')
   }
 }