路由钩子

VitePress 提供的 useRouter有 4 个路由钩子，分别为：

• onBeforeRouteChange：路由变化前触发，如果在该钩子函数中返回 false，则不会进行路由跳转
• onBeforePageLoad：页面加载前执行，在 onBeforeRouteChange之后触发，如果在该钩子函数中返回 false，则不会进行路由跳转
• onAfterPageLoad：页面加载后执行
• onAfterRouteChange：路由变化后触发，在 onAfterPageLoad之后触发

Teek 内置的 4 个评论区组件使用了 onAfterRouteChange钩子函数，且 vitepress-plugin-permalink插件分别使用了 onBeforeRouteChange和 onAfterRouteChange两个路由钩子。

如果您也需要使用这些路由钩子，请不要直接这样使用：

router.onAfterRouteChange=(href:string) =>{};

onAfterRouteChange是一个函数，您这样使用将会 覆盖Teek 在该钩子函数的逻辑，因此您需要这样使用：

<scriptsetuplang="ts">import{useRouter,useData } from"vitepress";constrouter=useRouter();conststate=router.state ||{};conststateKey="xx";if(!state[stateKey]) {constselfOnAfterRouteChange=router.onAfterRouteChange;router.onAfterRouteChange=(href:string) =>{selfOnAfterRouteChange?.(href);myFunction();};router.state ={...state,[stateKey]:true};}constmyFunction=() =>{};</script>

onBeforeRouteChange支持返回 false 来阻止路由跳转，因此请这样使用：

<scriptsetuplang="ts">import{useRouter,useData } from"vitepress";constrouter=useRouter();conststate=router.state ||{};conststateKey="xx";if(!state[stateKey]) {constselfOnAfterRouteChange=router.onAfterRouteChange;router.onBeforeRouteChange=(href:string) =>{constselfResult=selfOnBeforeRouteChange?.(href);if(selfResult ===false) returnfalse;myFunction();};router.state ={...state,[stateKey]:true};}constmyFunction=() =>{};</script>

useVpRouter

针对上面较为复杂的配置，Teek 已经封装了 Composables 函数 useVpRouter，该函数对 VitePress 的 router钩子进行封装，因此您可以这样使用：

<scriptsetuplang="ts">import{useVpRouter } from"vitepress-theme-teek";constvpRouter=useVpRouter();vpRouter.bindAfterRouteChange("xx",() =>{myFunction();});constmyFunction=() =>{};</script>

如果您想一次性绑定多个 router钩子，可以这样使用：

<scriptsetuplang="ts">import{useVpRouter } from"vitepress-theme-teek";constvpRouter=useVpRouter();vpRouter.bindRouterFn("xx",router=>{router.onBeforeRouteChange=(href:string) =>{constselfResult=selfOnBeforeRouteChange?.(href);if(selfResult ===false) returnfalse;myFunction();};router.onAfterRouteChange=(href:string) =>{selfOnAfterRouteChange?.(href);myFunction();};});constmyFunction=() =>{};</script>