diff --git a/lib/app/app.js b/lib/app/app.js index 924a966356..44db745354 100644 --- a/lib/app/app.js +++ b/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 } } diff --git a/lib/app/store.js b/lib/app/store.js new file mode 100644 index 0000000000..115fe0b9e6 --- /dev/null +++ b/lib/app/store.js @@ -0,0 +1,7 @@ +// 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 diff --git a/lib/default-theme/Layout.vue b/lib/default-theme/Layout.vue index 7ad99f1190..df988d69d7 100644 --- a/lib/default-theme/Layout.vue +++ b/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 } }