feat: tmp fix some scrollBehavior

diff --git a/explorations/html5.html b/explorations/html5.html
index d045f89f8a597d338face45decbadc3e116c8448..06914f085c98a0875f7cb8e4ee650f83a39f179e 100644 (file)
--- a/explorations/html5.html
+++ b/explorations/html5.html
@@ -44,6 +44,18 @@
         <input type="checkbox" v-model="shared.cancel" /> Cancel Next Navigation
       </label>
       <ul>
+        <li>
+          <router-link to="/n/%E2%82%AC">/n/%E2%82%AC</router-link>
+        </li>
+        <li>
+          <router-link to="/n/€">/n/€</router-link>
+        </li>
+        <li>
+          <a href="/n/%E2%82%AC">/n/%E2%82%AC (force reload)</a>
+        </li>
+        <li>
+          <a href="/n/€">/n/€ (force reload): not valid tho</a>
+        </li>
         <li>
           <router-link to="/">/</router-link>
         </li>

diff --git a/explorations/html5.ts b/explorations/html5.ts
index f872c78abd710796ec568c3e3235188839295e62..57e801289ea885280b62b95be14aa6a27cf73b94 100644 (file)
--- a/explorations/html5.ts
+++ b/explorations/html5.ts
@@ -95,6 +95,7 @@ const router = new Router({
     { path: '/', component: Home },
     { path: '/users/:id', name: 'user', component: User },
     { path: '/documents/:id', name: 'docs', component: User },
+    { path: '/n/€', name: 'euro', component },
     { path: '/n/:n', name: 'increment', component },
     { path: '/multiple/:a/:b', name: 'multiple', component },
     { path: '/long-:n', name: 'long', component: LongView },

diff --git a/src/history/html5.ts b/src/history/html5.ts
index 5dc32b010a91399c337b0d3acf8d9ed7f059b5ab..b838d0ee2bc7a59558b7b62783cca7c3610663b5 100644 (file)
--- a/src/history/html5.ts
+++ b/src/history/html5.ts
@@ -17,7 +17,7 @@ interface StateEntry {
   current: HistoryLocationNormalized
   forward: HistoryLocationNormalized | null
   replaced: boolean
-  scroll: ScrollToPosition
+  scroll: ScrollToPosition | null
 }
 
 // TODO: pretty useless right now except for typing
@@ -25,14 +25,15 @@ function buildState(
   back: HistoryLocationNormalized | null,
   current: HistoryLocationNormalized,
   forward: HistoryLocationNormalized | null,
-  replaced: boolean = false
+  replaced: boolean = false,
+  computeScroll: boolean = false
 ): StateEntry {
   return {
     back,
     current,
     forward,
     replaced,
-    scroll: computeScrollPosition(),
+    scroll: computeScroll ? computeScrollPosition() : null,
   }
 }
 
@@ -106,7 +107,9 @@ export class HTML5History extends BaseHistory {
         this.history.state.back,
         this.history.state.current,
         normalized,
-        this.history.state.replaced
+        this.history.state.replaced,
+        // TODO: this is just not enough to only save the scroll position when not pushing or replacing
+        true
       ),
       '',
       this.location.fullPath,

diff --git a/src/router.ts b/src/router.ts
index 98ad5b800a2c610f9f051e8afa084801fbe495c1..fa3781e7144b38617d0aefb49cdf1989c413469f 100644 (file)
--- a/src/router.ts
+++ b/src/router.ts
@@ -34,7 +34,7 @@ interface ScrollBehavior {
   (
     to: RouteLocationNormalized,
     from: RouteLocationNormalized,
-    savedPosition: ScrollToPosition
+    savedPosition: ScrollToPosition | null
   ): ScrollPosition | Promise<ScrollPosition>
 }
 
@@ -94,8 +94,11 @@ export class Router {
           ...matchedRoute,
         }
         this.updateReactiveRoute()
-        this.handleScroll(toLocation, this.currentRoute).catch(err =>
-          this.triggerError(err, false)
+        // TODO: refactor with a state getter
+        // const { scroll } = this.history.state
+        const { state } = window.history
+        this.handleScroll(toLocation, this.currentRoute, state.scroll).catch(
+          err => this.triggerError(err, false)
         )
       } catch (error) {
         if (NavigationGuardRedirect.is(error)) {
@@ -517,17 +520,13 @@ export class Router {
 
   private async handleScroll(
     to: RouteLocationNormalized,
-    from: RouteLocationNormalized
+    from: RouteLocationNormalized,
+    scrollPosition?: ScrollToPosition
   ) {
     if (!this.scrollBehavior) return
-    // TODO: handle other histories
-    const { state } = window.history
-    if (!state) return
-    const scroll: ScrollToPosition | void = state.scroll
-    if (!scroll) return
 
     await this.app.$nextTick()
-    const position = await this.scrollBehavior(to, from, scroll)
+    const position = await this.scrollBehavior(to, from, scrollPosition || null)
     console.log('scrolling to', position)
     scrollToPosition(position)
   }