feat(client): add onBeforePageLoad hook for router

[buqiyuan]

I am using fullpage.js, but it doesn't work properly in vitepress because it uses location.href for anchors internally, which causes the page to be reloaded in vitepress. Therefore, I want to add an onBeforeRoutePageLoad hook to control the timing of page reloading.

20230701-183916.mp4

docs/components/ComponentInHeader.vue:

<template>
  <span @click="handleClick">&#x26A1;</span>
</template>

<script setup lang="ts">
import { onMounted } from "vue";
import { useRouter } from 'vitepress'

const router = useRouter()

onMounted(() => {
  console.log('ComponentInHeader onMounted')
})

router.onBeforeRouteChange = ((to) => {
  console.log('onBeforeRouteChange',to) 
})

const handleClick = () => {
  location.href = '#escaping' 
  // const section = document.querySelector('#escaping')!;
  // section.scrollIntoView({ behavior: 'smooth' }); // 平滑滚动到元素位置
}
</script>

[brc-dd]

why the early return thing?

[buqiyuan]

I don't quite understand what you mean, if I return Promise.reject(), vitepress will treat it as an error catch, so I hope that the user's active cancellation can be distinguished from the program error.
My ideal API would be a routing guard of type vue-router, do you have any thoughts on this?

[buqiyuan]

Hello! Thank you very much for your work! However, the issue I encountered has not been resolved yet. When using location.href('#xxx') for anchor links, it triggers the popstate event, but it does not execute the go function, so it does not pass through the onBeforePageLoad hook.

vitepress/src/client/app/router.ts

Lines 215 to 217 in fa3780f

	window.addEventListener('popstate', (e) => {
	loadPage(location.href, (e.state && e.state.scrollPosition) || 0)
	})

[brc-dd]

ah, moving that condition inside loadPage should work then.

[brc-dd]

fixed in a3df617