如何在Ember中使用<LinkTo @route="">实现类似HTML <a href="#">的空链接效果

直接给 <LinkTo> 的 @route 传空字符串是不可行的，Ember 的 <LinkTo> 组件要求 @route 参数必须是路由配置中已注册的有效路由名称，传入空值会触发运行时报错，无法正常渲染。

如果需要实现和 <a href="#"> 效果一致的临时占位链接，可以选择以下两种常用方案：

• 若要沿用 <LinkTo> 组件的样式能力，可传入当前路由名同时阻止默认跳转行为，写法如下：

  <LinkTo @route={{this.router.currentRouteName}} @preventDefault={{true}}>临时链接文本</LinkTo>
  

  这种写法点击后不会触发路由跳转，效果和空锚点链接完全一致。
• 若只是临时占位不需要用到 <LinkTo> 的路由相关能力，直接用原生 <a> 标签更简单：

  <a href="#" {{on "click" (prevent-default)}}>临时链接文本</a>
  

如果没有强制要求用 <a> 标签语义，也可以直接用带对应样式的 <button> 元素做占位，不需要额外处理点击事件。

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