fix: unexpected scroll behavior after clicking sidebar links (#298)

lib/app/app.js

@@ -3,6 +3,7 @@ import Router from 'vue-router'
 import Content from './Content'
 import ClientOnly from './ClientOnly'
 import dataMixin from './dataMixin'
+import store from './store'
 import NotFound from '@notFound'
 import { routes } from '@temp/routes'
 import { siteData } from '@temp/siteData'
@@ -57,7 +58,12 @@ export function createApp () {
       if (saved) {
         return saved
       } else if (to.hash) {
-        return false
+        if (store.disableScrollBehavior) {
+          return false
+        }
+        return {
+          selector: to.hash
+        }
       } else {
         return { x: 0, y: 0 }
       }

lib/app/store.js

+// It is not yet time to use Vuex to manage the global state
+// singleton object as a global store.
+const state = {
+  disableScrollBehavior: false
+}
+
+export default state

lib/default-theme/Layout.vue

@@ -28,6 +28,7 @@ import Navbar from './Navbar.vue'
 import Page from './Page.vue'
 import Sidebar from './Sidebar.vue'
 import { pathToComponentName } from '@app/util'
+import store from '@app/store'
 import { resolveSidebarItems } from './util'
 import throttle from 'lodash.throttle'
 
@@ -165,7 +166,7 @@ export default {
       const sidebarLinks = [].slice.call(document.querySelectorAll('.sidebar-link'))
       const anchors = [].slice.call(document.querySelectorAll('.header-anchor'))
         .filter(anchor => sidebarLinks.some(sidebarLink => sidebarLink.hash === anchor.hash))
-        
+
       const scrollTop = Math.max(window.pageYOffset, document.documentElement.scrollTop, document.body.scrollTop)
 
       for (let i = 0; i < anchors.length; i++) {
@@ -177,7 +178,13 @@ export default {
             (!nextAnchor || scrollTop < nextAnchor.parentElement.offsetTop - 10))
 
         if (isActive && this.$route.hash !== anchor.hash) {
-          this.$router.replace(anchor.hash)
+          store.disableScrollBehavior = true
+          this.$router.replace(anchor.hash, () => {
+            // execute after scrollBehavior handler.
+            this.$nextTick(() => {
+              store.disableScrollBehavior = false
+            })
+          })
           return
         }
       }