fix(history): mark redundant navigation as pending

Fix #3133

Author: posva

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>

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))

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')
   }
 }