fix(hash): manual changes should trigger a navigation

Close #346

diff --git a/e2e/hash/index.ts b/e2e/hash/index.ts
index 4f7e34afcd21e6b2a9947e06faf5e773bce639e8..68e61657cdfe0679c5c5e049117c09a4d0e977c5 100644 (file)
--- a/e2e/hash/index.ts
+++ b/e2e/hash/index.ts
@@ -6,8 +6,8 @@ const Home: RouteComponent = {
   template: `<div>home</div>`,
 }
 
-const Foo: RouteComponent = { template: '<div>foo</div>' }
-const Bar: RouteComponent = { template: '<div>bar</div>' }
+const Foo: RouteComponent = { template: '<div>Foo</div>' }
+const Bar: RouteComponent = { template: '<div>Bar</div>' }
 
 const Unicode: RouteComponent = {
   setup() {
@@ -65,6 +65,7 @@ const app = createApp({
             router)</a
           >
         </li>
+        <li><a href="#/foo">/foo (regular hash)</a></li>
       </ul>
 
       <p>
@@ -75,7 +76,7 @@ const app = createApp({
         hash: <code id="hash">{{ route.hash }}</code>
       </p>
 
-      <router-view></router-view>
+      <router-view class="view"></router-view>
     </div>
   `,
 })

diff --git a/e2e/specs/hash.js b/e2e/specs/hash.js
index 3ad0c71c8df2c8bf40078626517df0d3e72444f1..5d381988da6b8cca71ff0940551734cec308fdcf 100644 (file)
--- a/e2e/specs/hash.js
+++ b/e2e/specs/hash.js
@@ -23,6 +23,7 @@ module.exports = {
       )
       .click('li:nth-child(3) a')
       .assert.urlEquals(baseURL + '/bar')
+      .assert.containsText('.view', 'Bar')
       .click('li:nth-child(2) a')
       .assert.urlEquals(baseURL + '/foo')
       .click('li:nth-child(4) a')
@@ -38,6 +39,12 @@ module.exports = {
       .click('li:nth-child(5) a')
       .assert.containsText('#param', 'é')
 
+      // regular links should not break navigation
+      .click('li:nth-child(10) a')
+      .assert.urlEquals(baseURL + '/foo')
+      .assert.containsText('#path', '/foo')
+      .assert.containsText('.view', 'Foo')
+
       .end()
   },
 

diff --git a/src/history/html5.ts b/src/history/html5.ts
index 1a2081b0117f7f561b613570f1b4e4429fb51215..281875619e60c55fc16a8aaf26b257f453eb4ded 100644 (file)
--- a/src/history/html5.ts
+++ b/src/history/html5.ts
@@ -71,21 +71,24 @@ function useHistoryListeners(
     state: StateEntry | null
   }) => {
     const to = createCurrentLocation(base, window.location)
-
-    if (!state) return replace(to.fullPath)
-
     const from: HistoryLocationNormalized = location.value
     const fromState: StateEntry = historyState.value
-    location.value = to
-    historyState.value = state
+    let delta = 0
+
+    if (state) {
+      location.value = to
+      historyState.value = state
 
-    // ignore the popstate and reset the pauseState
-    if (pauseState && pauseState.fullPath === from.fullPath) {
-      pauseState = null
-      return
+      // ignore the popstate and reset the pauseState
+      if (pauseState && pauseState.fullPath === from.fullPath) {
+        pauseState = null
+        return
+      }
+      delta = fromState ? state.position - fromState.position : 0
+    } else {
+      replace(to.fullPath)
     }
 
-    const delta = fromState ? state.position - fromState.position : 0
     // console.log({ deltaFromCurrent })
     // Here we could also revert the navigation by calling history.go(-delta)
     // this listener will have to be adapted to not trigger again and to wait for the url

diff --git a/src/router.ts b/src/router.ts
index fcd1c3875274d6f82adad84821b4a1c98409a1d5..2ef0b8bca2e843b0de91c795b997fea562f6370a 100644 (file)
--- a/src/router.ts
+++ b/src/router.ts
@@ -755,7 +755,8 @@ export function createRouter(options: RouterOptions): Router {
           if (
             isNavigationFailure(error, ErrorTypes.NAVIGATION_GUARD_REDIRECT)
           ) {
-            routerHistory.go(-info.delta, false)
+            // do not restore history on unknown direction
+            if (info.delta) routerHistory.go(-info.delta, false)
             // the error is already handled by router.push we just want to avoid
             // logging the error
             pushWithRedirect(
@@ -766,8 +767,8 @@ export function createRouter(options: RouterOptions): Router {
             // avoid the then branch
             return Promise.reject()
           }
-          // TODO: test on different browsers ensure consistent behavior
-          routerHistory.go(-info.delta, false)
+          // do not restore history on unknown direction
+          if (info.delta) routerHistory.go(-info.delta, false)
           // unrecognized error, transfer to the global handler
           return triggerError(error)
         })
@@ -782,7 +783,7 @@ export function createRouter(options: RouterOptions): Router {
             )
 
           // revert the navigation
-          if (failure) routerHistory.go(-info.delta, false)
+          if (failure && info.delta) routerHistory.go(-info.delta, false)
 
           triggerAfterEach(
             toLocation as RouteLocationNormalizedLoaded,