为什么要在EmberJS中使用{{＃link-to}}而不是<a></a>？

Question

这是一个很新手的问题。但是，在EmberJS中，我发现这两种方法都适用于链接到我的应用程序中的博客页面。

<p>{{#link-to 'posts'}} See my blog{{/link-to}}</p> 
<a href="posts"> See my blog</a> 

在EmberJS中使用{{link-to}}更好吗？怎么来的？

Answer 1

区别在于{{link-to}}组件将在当前运行的Ember应用程序内导航到指定的路线，而<a href="posts">将对该位置执行新的浏览器请求，并在该路线重新启动您的Ember应用程序。您应该使用{{link-to}}，因为您将使用Ember内部在您的单页应用程序中进行导航，并且它将会带来更流畅的用户体验。

虽然他们都可以工作，密切关注你的浏览器，你会看到锚标记会给你一个页面刷新，然后重新启动您的灰烬应用程序（虽然在正确的位置）。使用{{link-to}}会感觉更快，因为Ember通过javascript呈现新页面，而不是刷新页面后重新启动。这是在内导航单页应用程序与从外部页面跳入SPA之间的区别。

虽然Ember在运行时确实代替{{link-to}}呈现定位标记，但它会插入并停止默认的定位标记行为。该文档解释它像这样：

默认情况下，{{link-to}}组件阻止默认浏览器通过调用preventDefault()因为这种行动冒泡的 动作 通常内部处理，我们不想把浏览器 一个新的URL（例如）。

（从https://emberjs.com/api/classes/Ember.Templates.helpers.html#toc_allowing-default-action）

另外，在{{link-to}}部件可以直接传递模式进入路线。这有点高级，但Ember指南有一些很好的例子。 https://guides.emberjs.com/v2.13.0/templates/links/