fix: avoid restore on cancelled pop navigations

vuejs · Jul 27, 2022 · 66491c1 · 66491c1
1 parent 301b52c
commit 66491c1
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 4 deletions.
diff --git a/packages/router/e2e/guards-instances/index.ts b/packages/router/e2e/guards-instances/index.ts
@@ -96,11 +96,14 @@ function createTestComponent(key: string) {
 }
 
 const Foo = createTestComponent('Foo')
-const Bar = createTestComponent('Bar')
 const One = createTestComponent('One')
 const Two = createTestComponent('Two')
 const Aux = createTestComponent('Aux')
 
+const WithId = defineComponent({
+  template: `<p :id="'with-id-' + $route.params.id">id: {{ $route.params.id }}</p>`,
+})
+
 const webHistory = createWebHistory('/guards-instances')
 const router = createRouter({
   history: webHistory,
@@ -117,7 +120,8 @@ const router = createRouter({
     // TODO: test that the onBeforeRouteUpdate isn't kept
     {
       path: '/b/:id',
-      component: Bar,
+      name: 'id',
+      component: WithId,
     },
     {
       path: '/named-one',
@@ -136,6 +140,17 @@ const router = createRouter({
   ],
 })
 
+router.beforeEach(async (to, from) => {
+  if (to.name === 'id') {
+    const toId = Number(to.params.id)
+    const fromId = Number(from.params.id)
+    // only do it when we are going backwards
+    if (!Number.isNaN(toId) && !Number.isNaN(fromId) && toId < fromId) {
+      await new Promise(r => setTimeout(r, 250))
+    }
+  }
+})
+
 // preserve existing query
 const originalPush = router.push
 router.push = to => {
@@ -187,6 +202,9 @@ leaves: {{ state.leave }}
       <li><router-link id="update-query" :to="{ query: { n: (Number($route.query.n) || 0) + 1 }}" v-slot="{ route }">{{ route.fullPath }}</router-link></li>
       <li><router-link to="/named-one">/named-one</router-link></li>
       <li><router-link to="/named-two">/named-two</router-link></li>
+      <li><router-link to="/b/1">/b/1</router-link></li>
+      <li><router-link to="/b/2">/b/2</router-link></li>
+      <li><router-link to="/b/3">/b/3</router-link></li>
     </ul>
 
     <template v-if="testCase === 'keepalive'">

diff --git a/packages/router/e2e/specs/guards-instances.js b/packages/router/e2e/specs/guards-instances.js
@@ -38,6 +38,8 @@ function testCase(browser, name) {
     )
 }
 
+const baseURL = 'http://localhost:3000/guards-instances'
+
 module.exports = {
   '@tags': [],
 
@@ -61,6 +63,24 @@ module.exports = {
     browser.end()
   },
 
+  /** @type {import('nightwatch').NightwatchTest} */
+  'cancel pending pop navigations': function (browser) {
+    browser
+      .url(baseURL + '/')
+      .waitForElementPresent('#app > *', 1000)
+
+      .click('#test-normal')
+      .click('li:nth-child(11) a')
+      .click('li:nth-child(12) a')
+      .click('li:nth-child(13) a')
+      .back()
+      .back()
+      .waitForElementPresent('#app > #with-id-1', 1000)
+      .assert.urlEquals(baseURL + '/b/1?testCase=')
+
+      .end()
+  },
+
   /** @type {import('nightwatch').NightwatchTest} */
   'guards instances transition': function (browser) {
     browser

diff --git a/packages/router/src/router.ts b/packages/router/src/router.ts
@@ -1034,7 +1034,9 @@ export function createRouter(options: RouterOptions): Router {
             return Promise.reject()
           }
           // do not restore history on unknown direction
-          if (info.delta) routerHistory.go(-info.delta, false)
+          if (info.delta) {
+            routerHistory.go(-info.delta, false)
+          }
           // unrecognized error, transfer to the global handler
           return triggerError(error, toLocation, from)
         })
@@ -1050,7 +1052,12 @@ export function createRouter(options: RouterOptions): Router {
 
           // revert the navigation
           if (failure) {
-            if (info.delta) {
+            if (
+              info.delta &&
+              // a new navigation has been triggered, so we do not want to revert, that will change the current history
+              // entry while a different route is displayed
+              !isNavigationFailure(failure, ErrorTypes.NAVIGATION_CANCELLED)
+            ) {
               routerHistory.go(-info.delta, false)
             } else if (
               info.type === NavigationType.pop &&