svelte-routing中Link组件与link动作的区别及适用场景

很多人刚用这个库的时候都会搞混这两个导航能力，其实二者底层用的是同一套路由跳转逻辑，核心区别只是封装形态不一样，适配不同的使用场景：

• 本质差异
  • Link 是库封装好的独立Svelte组件，使用时直接写组件标签即可，它会自动渲染为标准的<a>锚点标签，内置了导航跳转、当前路由自动匹配加激活类名、href属性自动生成等完整逻辑，属于开箱即用的方案。
  • link 是一个Svelte动作（action），本身不渲染任何DOM元素，作用是给你已经写好的原生<a>标签（或者其他渲染为a标签的第三方组件）附加客户端无刷新导航的能力，属于无侵入增强的方案。
• 具体使用区别
  用Link的写法不需要自己写a标签，直接传目标路由属性就行：

  <!-- 直接用组件，自动渲染为<a href="/about">关于我们</a> -->
  <Link to="/about">关于我们</Link>
  

  用link动作必须自己写原生a标签，再把动作绑定到标签上：

  <!-- 自己写a标签，通过动作给它加路由能力 -->
  <a href="/about" use:link>关于我们</a>
  <!-- 需要替换当前历史记录时直接传参数即可 -->
  <a href="/home" use:link={{replace: true}}>返回首页</a>
  

• 选型参考
  • 如果你只是需要一个标准导航链接，不需要自定义a标签的特殊属性、结构，尤其是做侧边栏、顶部导航这类需要自动高亮当前页的场景，直接用Link最省事，不用自己写路由匹配逻辑。
  • 如果你已经写好了原生a标签、或者在用第三方UI组件库的锚点/按钮组件没法直接替换成Link，亦或是你需要完全控制锚点的DOM结构、自定义属性，就用link动作做增强，不会破坏你原有代码结构。

二者不存在功能上的优劣，跳转时都不会触发浏览器整页刷新，只是给不同编码习惯、不同场景提供的两种用法而已。

内容的提问来源于stack exchange，提问作者Gorgsenegger