fix: optimize SafeRouterLink.vue

Author: recoluan

packages/vuepress-theme-reco/src/client/components/SafeRouterLink.vue

@@ -1,7 +1,9 @@
 <template>
+  <!-- 添加preventDefault防止a标签默认行为，避免页面闪白 -->
   <component
     :is="linkComponent"
     v-bind="componentProps"
+    @click="handleClick"
   >
     <slot></slot>
   </component>
@@ -11,17 +13,20 @@
 // 注意：我们有意使用普通JavaScript而非Typescript
 // 这可以避免TS在编译期间检查导入的组件
 
-import { shallowRef, computed, onMounted, onBeforeMount } from 'vue'
+import { shallowRef, computed, ref, onBeforeMount, onMounted } from 'vue'
 import { useRouter } from 'vuepress/client'
 
 // 安全地检测我们是否在服务器上
 const isServer = typeof window === 'undefined'
+let router = null
+
+// 标记RouterLink是否已经加载完成
+const routerLinkLoaded = ref(false)
 
 // 获取路由实例
-let router = null
 if (!isServer) {
   try {
-    router = useRouter() 
+    router = useRouter()
   } catch (e) {
     console.warn('SafeRouterLink: Error getting router instance', e)
   }
@@ -59,40 +64,11 @@ const componentProps = computed(() => {
       ? props.to.path
       : '/'
 
-  if (isServer) {
-    // 在服务器端使用正常的a标签
-    return {
-      class: 'router-link-fallback',
-      href: toPath,
-      // 添加 onclick 防止默认行为
-      onclick: 'return false;',
-      ...props.$attrs
-    }
-  } else if (linkComponent.value === 'a') {
-    // 在客户端但RouterLink还未加载完成时
-    // 使用 a 标签并自己处理导航逻辑
+  if (isServer || linkComponent.value === 'a') {
+    // 在服务器端或当仍然使用 a 标签时
     return {
       class: 'router-link-fallback',
       href: toPath,
-      // 实现对点击事件的处理，阻止页面刷新但仍然能实现路由跳转
-      onClick: (e) => {
-        e.preventDefault(); // 阻止默认行为
-        
-        // 如果有路由实例，手动调用导航
-        if (router) {
-          const path = typeof props.to === 'string' ? props.to : 
-                      (props.to && typeof props.to === 'object') ? props.to : '/';
-          
-          if (props.replace) {
-            router.replace(path);
-          } else {
-            router.push(path);
-          }
-        } else {
-          // 如果没有路由实例，回退到正常行为
-          window.location.href = toPath;
-        }
-      },
       ...props.$attrs
     }
   } else {
@@ -107,42 +83,63 @@ const componentProps = computed(() => {
   }
 })
 
-// 在组件创建前就开始加载 RouterLink
+// 处理点击事件
+const handleClick = (e) => {
+  // 如果还在使用a标签时，防止默认行为并用编程式跳转
+  if (linkComponent.value === 'a' && router) {
+    e.preventDefault()
+    const toPath = typeof props.to === 'string'
+      ? props.to
+      : (props.to && typeof props.to === 'object' && props.to.path)
+        ? props.to.path
+        : '/'
+
+    // 使用router导航而非页面刷新
+    if (props.replace) {
+      router.replace(props.to)
+    } else {
+      router.push(props.to)
+    }
+  }
+}
+
+// 提前在组件挂载前就开始加载 RouterLink
 onBeforeMount(() => {
   if (!isServer) {
-    // 使用缓存避免重复导入RouterLink
-    if (window.__ROUTER_LINK_LOADED__) {
-      linkComponent.value = window.__ROUTER_LINK_COMPONENT__
-      return
-    }
+    loadRouterLink()
+  }
+})
+
+// 定义加载 RouterLink 的函数
+const loadRouterLink = () => {
+  // 使用缓存避免重复导入RouterLink
+  if (window.__ROUTER_LINK_LOADED__) {
+    linkComponent.value = window.__ROUTER_LINK_COMPONENT__
+    routerLinkLoaded.value = true
+    return
+  }
 
-    // 使用立即执行的异步函数
-    (async () => {
-      try {
-        // 使用 await 等待导入完成
-        const vuepress = await import('vuepress/client')
-        if (vuepress.RouterLink) {
-          // 缓存RouterLink组件引用
-          window.__ROUTER_LINK_COMPONENT__ = vuepress.RouterLink
-          window.__ROUTER_LINK_LOADED__ = true
-          linkComponent.value = vuepress.RouterLink
-        }
-      } catch (e) {
-        console.warn('SafeRouterLink: Failed to load RouterLink, using fallback link', e)
+  try {
+    import('vuepress/client').then(vuepress => {
+      if (vuepress.RouterLink) {
+        // 缓存RouterLink组件引用
+        window.__ROUTER_LINK_COMPONENT__ = vuepress.RouterLink
+        window.__ROUTER_LINK_LOADED__ = true
+        linkComponent.value = vuepress.RouterLink
+        routerLinkLoaded.value = true
       }
-    })();
+    }).catch(e => {
+      console.warn('SafeRouterLink: Failed to load RouterLink, using fallback link', e)
+    })
+  } catch (e) {
+    console.warn('SafeRouterLink: Error importing RouterLink', e)
   }
-})
+}
 
-// 也保留 onMounted 钩子，确保 RouterLink 被正确加载
+// 确保组件挂载后也尝试加载 RouterLink
 onMounted(() => {
-  if (!isServer && !window.__ROUTER_LINK_LOADED__) {
-    // 如果 onBeforeMount 没有成功加载，再次尝试
-    setTimeout(() => {
-      if (window.__ROUTER_LINK_LOADED__) {
-        linkComponent.value = window.__ROUTER_LINK_COMPONENT__
-      }
-    }, 0)
+  if (!isServer && !routerLinkLoaded.value) {
+    loadRouterLink()
   }
 })
 </script>