From c1a9868ead553cb905d21f65cee98639a89923c6 Mon Sep 17 00:00:00 2001
From: pengzhanbo <volodymyr@foxmail.com>
Date: Sun, 24 Mar 2024 01:59:41 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=C2=A0=E5=AF=BC=E8=88=AA=E6=A0=8F?=
 =?UTF-8?q?=E9=93=BE=E6=8E=A5=E6=94=AF=E6=8C=81=E4=BC=A0=E5=85=A5=E6=96=87?=
 =?UTF-8?q?=E4=BB=B6=E8=B7=AF=E5=BE=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 theme/src/client/components/AutoLink.vue      | 19 +++++---
 theme/src/client/composables/index.ts         |  2 +-
 theme/src/client/composables/useNavLink.ts    | 22 +++++++++
 .../useResolveRouteWithRedirect.ts            | 45 -------------------
 4 files changed, 36 insertions(+), 52 deletions(-)
 create mode 100644 theme/src/client/composables/useNavLink.ts
 delete mode 100644 theme/src/client/composables/useResolveRouteWithRedirect.ts

diff --git a/theme/src/client/components/AutoLink.vue b/theme/src/client/components/AutoLink.vue
index 1648a9ca..5d352ed5 100644
--- a/theme/src/client/components/AutoLink.vue
+++ b/theme/src/client/components/AutoLink.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
-import { useRouter } from 'vuepress/client'
-import { EXTERNAL_URL_RE, normalizeLink } from '../utils/index.js'
+import { resolveRoutePath, useRouter, withBase } from 'vuepress/client'
+import { EXTERNAL_URL_RE } from '../utils/index.js'
 import IconExternalLink from './icons/IconExternalLink.vue'
 
 const props = defineProps<{
@@ -18,12 +18,19 @@ const tag = computed(() => props.tag ?? (props.href ? 'a' : 'span'))
 const isExternal = computed(
   () => props.href && EXTERNAL_URL_RE.test(props.href),
 )
+const link = computed(() => {
+  if (!props.href)
+    return undefined
+  if (isExternal.value)
+    return props.href
+  return withBase(resolveRoutePath(props.href))
+})
 
 function linkTo(e: Event) {
   if (!isExternal.value) {
     e.preventDefault()
-    if (props.href)
-      router.push({ path: props.href })
+    if (link.value)
+      router.push({ path: link.value })
   }
 }
 </script>
@@ -32,8 +39,8 @@ function linkTo(e: Event) {
   <Component
     :is="tag"
     class="auto-link"
-    :class="{ link: href }"
-    :href="href ? normalizeLink(href) : undefined"
+    :class="{ link }"
+    :href="link"
     :target="target ?? (isExternal ? '_blank' : undefined)"
     :rel="rel ?? (isExternal ? 'noreferrer' : undefined)"
     @click="linkTo($event)"
diff --git a/theme/src/client/composables/index.ts b/theme/src/client/composables/index.ts
index 34b4c87f..6af2388c 100644
--- a/theme/src/client/composables/index.ts
+++ b/theme/src/client/composables/index.ts
@@ -1,7 +1,7 @@
 export * from './darkMode.js'
 export * from './useScrollPromise.js'
 export * from './themeData.js'
-export * from './useResolveRouteWithRedirect.js'
+export * from './useNavLink.js'
 export * from './sidebar.js'
 export * from './aside.js'
 export * from './page.js'
diff --git a/theme/src/client/composables/useNavLink.ts b/theme/src/client/composables/useNavLink.ts
new file mode 100644
index 00000000..b61844f7
--- /dev/null
+++ b/theme/src/client/composables/useNavLink.ts
@@ -0,0 +1,22 @@
+import { resolveRoute } from 'vuepress/client'
+import type { NavItemWithLink } from '../../shared/index.js'
+
+/**
+ * Resolve NavLink props from string
+ *
+ * @example
+ * - Input: '/README.md'
+ * - Output: { text: 'Home', link: '/' }
+ */
+export function useNavLink(config: string): NavItemWithLink {
+  const { notFound, meta, path } = resolveRoute<{
+    title?: string
+  }>(config)
+
+  return notFound
+    ? { text: path, link: path }
+    : {
+        text: meta.title || path,
+        link: path,
+      }
+}
diff --git a/theme/src/client/composables/useResolveRouteWithRedirect.ts b/theme/src/client/composables/useResolveRouteWithRedirect.ts
deleted file mode 100644
index f51ba450..00000000
--- a/theme/src/client/composables/useResolveRouteWithRedirect.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-import { isFunction, isString } from 'vuepress/shared'
-import { useRouter } from 'vuepress/client'
-import type { Router } from 'vuepress/client'
-import type { NavItemWithLink } from '../../shared/index.js'
-
-/**
- * Resolve a route with redirection
- */
-export function useResolveRouteWithRedirect(...args: Parameters<Router['resolve']>): ReturnType<Router['resolve']> {
-  const router = useRouter()
-  const route = router.resolve(...args)
-  const lastMatched = route.matched[route.matched.length - 1]
-  if (!lastMatched?.redirect)
-    return route
-
-  const { redirect } = lastMatched
-  const resolvedRedirect = isFunction(redirect) ? redirect(route) : redirect
-  const resolvedRedirectObj = isString(resolvedRedirect)
-    ? { path: resolvedRedirect }
-    : resolvedRedirect
-  return useResolveRouteWithRedirect({
-    hash: route.hash,
-    query: route.query,
-    params: route.params,
-    ...resolvedRedirectObj,
-  })
-}
-
-/**
- * Resolve NavLink props from string
- *
- * @example
- * - Input: '/README.md'
- * - Output: { text: 'Home', link: '/' }
- */
-export function useNavLink(item: string): NavItemWithLink {
-  // the route path of vue-router is url-encoded, and we expect users are using
-  // non-url-encoded string in theme config, so we need to url-encode it first to
-  // resolve the route correctly
-  const resolved = useResolveRouteWithRedirect(encodeURI(item))
-  return {
-    text: (resolved.meta as any).title || item,
-    link: resolved.name === '404' ? item : resolved.fullPath,
-  }
-}