为什么要停止使用框架特定的组件？

因为CMS生成的HTML中的锚点不支持这些组件，直接使用标签可以简化实现。

DEV Community ·

停止使用框架特定的组件。请改用这个...

💡 原文英文，约2100词，阅读约需8分钟。

📝

许多JS框架提供<Link>组件，但CMS生成的HTML中的锚点不支持。SvelteKit允许直接使用<a>标签，简化实现。文章讨论了如何在Next.js中实现类似功能，包括事件监听、链接信息提取和预加载设置，并提供了代码示例和详细解释。

🎯

🔎

许多JavaScript框架提供<Link>组件以增强用户体验，但在CMS生成的HTML中，锚点并不总是兼容。SvelteKit的做法是直接使用<a>标签，这种简化的实现方式为其他框架提供了借鉴，尤其是在处理复杂的链接时。

文章强调了浏览器事件冒泡在链接处理中的关键作用。通过在文档元素上设置点击事件监听器，可以有效地管理用户的导航行为。这种方法不仅提高了性能，还能避免不必要的页面重载。

在Next.js中实现预加载功能需要在<body>元素上添加特定的data属性。通过这种方式，可以优化用户体验，减少页面加载时间。开发者应注意在全局配置中合理设置预取选项，以避免服务器负担过重。

❓

因为CMS生成的HTML中的锚点不支持这些组件，直接使用<a>标签可以简化实现。

可以通过设置文档元素的点击事件监听器，处理锚点和链接信息来实现。

需要在<body>元素上添加data-linky-preload="hover"属性，并创建一个包装组件来应用特殊的数据属性。

SvelteKit直接渲染HTML <a>标签，不需要额外的<Link>组件，简化了链接处理。

可以通过定义函数来获取锚点的属性，并设置事件监听器来处理点击事件。

需要检查链接的目标和协议，如果是外部链接则使用经典导航。

🏷️