为什么我应该在 EmberJS 中使用 {{#link-to}} 而不是 <a></a>?

Why should I use {{#link-to}} instead of <a></a> in EmberJS?

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

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

在 EmberJS 中使用 {{link-to}} 更好吗?怎么会?

区别在于{{link-to}}组件会导航到当前运行ningEmber应用中的指定路由,而<a href="posts">会做一个新的浏览器请求到该位置并在该路线重新启动您的 Ember 应用程序。您应该使用 {{link-to}},因为您将使用 Ember 内部结构在单页应用程序中导航,这将是更流畅的用户体验。

虽然它们都可以工作,但请仔细观察您的浏览器,您会看到锚标记会让您刷新页面并重新启动您的 Ember 应用(虽然在正确的位置)。使用 {{link-to}} 会感觉更快,因为 Ember 通过 javascript 呈现新页面,而不是在页面刷新后重新启动。这是在 单页应用程序导航和从外部页面跳转到 SPA 之间的区别。

虽然 Ember 确实在 运行 时呈现锚标记代替 {{link-to}},但它会插入以停止默认锚标记行为。文档是这样解释的:

By default the {{link-to}} component prevents the default browser action by calling preventDefault() as this sort of action bubbling is normally handled internally and we do not want to take the browser to a new URL (for example).

(来自 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/