feat: allow function for NavItem link

src/client/theme-default/components/VPMenuLink.vue

@@ -1,15 +1,22 @@
 <script lang="ts" setup generic="T extends DefaultTheme.NavItemWithLink">
 import type { DefaultTheme } from 'vitepress/theme'
+import { computed } from 'vue'
 import { useData } from '../composables/data'
 import { isActive } from '../../shared'
 import VPLink from './VPLink.vue'
 
-defineProps<{
+const props = defineProps<{
   item: T
 }>()
 
 const { page } = useData()
 
+const href = computed(() =>
+  typeof props.item.link === 'function'
+    ? props.item.link(page.value)
+    : props.item.link
+)
+
 defineOptions({ inheritAttrs: false })
 </script>
 
@@ -20,11 +27,11 @@ defineOptions({ inheritAttrs: false })
       :class="{
         active: isActive(
           page.relativePath,
-          item.activeMatch || item.link,
+          item.activeMatch || href,
           !!item.activeMatch
         )
       }"
-      :href="item.link"
+      :href
       :target="item.target"
       :rel="item.rel"
       :no-icon="item.noIcon"

src/client/theme-default/components/VPNavBarMenuGroup.vue

@@ -17,7 +17,7 @@ const isChildActive = (navItem: DefaultTheme.NavItem) => {
   if ('link' in navItem) {
     return isActive(
       page.value.relativePath,
-      navItem.link,
+      typeof navItem.link === "function" ? navItem.link(page.value) : navItem.link,
       !!props.item.activeMatch
     )
   }

src/client/theme-default/components/VPNavBarMenuLink.vue

@@ -1,14 +1,21 @@
 <script lang="ts" setup>
 import type { DefaultTheme } from 'vitepress/theme'
+import { computed } from 'vue'
 import { useData } from '../composables/data'
 import { isActive } from '../../shared'
 import VPLink from './VPLink.vue'
 
-defineProps<{
+const props = defineProps<{
   item: DefaultTheme.NavItemWithLink
 }>()
 
 const { page } = useData()
+
+const href = computed(() =>
+  typeof props.item.link === 'function'
+    ? props.item.link(page.value)
+    : props.item.link
+)
 </script>
 
 <template>
@@ -17,11 +24,11 @@ const { page } = useData()
       VPNavBarMenuLink: true,
       active: isActive(
         page.relativePath,
-        item.activeMatch || item.link,
+        item.activeMatch || href,
         !!item.activeMatch
       )
     }"
-    :href="item.link"
+    :href
     :target="item.target"
     :rel="item.rel"
     :no-icon="item.noIcon"

src/client/theme-default/components/VPNavScreenMenuGroupLink.vue

@@ -1,20 +1,29 @@
 <script lang="ts" setup>
 import type { DefaultTheme } from 'vitepress/theme'
-import { inject } from 'vue'
+import { computed, inject } from 'vue'
+import { useData } from '../composables/data'
 import { navInjectionKey } from '../composables/nav'
 import VPLink from './VPLink.vue'
 
-defineProps<{
+const props = defineProps<{
   item: DefaultTheme.NavItemWithLink
 }>()
 
+const { page } = useData()
+
+const href = computed(() =>
+  typeof props.item.link === 'function'
+    ? props.item.link(page.value)
+    : props.item.link
+)
+
 const { closeScreen } = inject(navInjectionKey)!
 </script>
 
 <template>
   <VPLink
     class="VPNavScreenMenuGroupLink"
-    :href="item.link"
+    :href
     :target="item.target"
     :rel="item.rel"
     :no-icon="item.noIcon"

src/client/theme-default/components/VPNavScreenMenuLink.vue

@@ -1,20 +1,29 @@
 <script lang="ts" setup>
 import type { DefaultTheme } from 'vitepress/theme'
-import { inject } from 'vue'
+import { computed, inject } from 'vue'
+import { useData } from '../composables/data'
 import { navInjectionKey } from '../composables/nav'
 import VPLink from './VPLink.vue'
 
-defineProps<{
+const props = defineProps<{
   item: DefaultTheme.NavItemWithLink
 }>()
 
+const { page } = useData()
+
+const href = computed(() =>
+  typeof props.item.link === 'function'
+    ? props.item.link(page.value)
+    : props.item.link
+)
+
 const { closeScreen } = inject(navInjectionKey)!
 </script>
 
 <template>
   <VPLink
     class="VPNavScreenMenuLink"
-    :href="item.link"
+    :href
     :target="item.target"
     :rel="item.rel"
     :no-icon="item.noIcon"

types/default-theme.d.ts

@@ -171,7 +171,7 @@ export namespace DefaultTheme {
 
   export interface NavItemWithLink {
     text: string
-    link: string
+    link: string | ((payload: PageData) => string)
     items?: never
 
     /**