动态路由代码什么都不做

Question

这是我想说得更清楚的问题：

我正在尝试制作动态路线。当我单击一张图片时，它应该转到具有不同 URL 和不同内容的详细信息页面。比如，当我点击第一张图片时，它应该转到 localhost:4200/pic/1 或 localhost:4200/1。

我正在尝试进行 URL 动态处理，但到目前为止我做不到，当我单击图片时它没有任何反应。我做错了什么？

此外，一开始我为每张图片都创建了路线和模板，但是如果数据量更大，这是不可能的。我该如何处理？

Answer 1

我通过以下方式实现了它：

下面是 pic 模型传递给 link-to 中的路由的模板：

{{outlet}}

{{#each model as |pic|}}
  <div>{{#link-to "pic" pic}}
     <img src={{pic.image}} width="300">
  {{/link-to}}</div>
{{/each}}

Answer 2

在为动态路由使用 {{link-to}} 助手时，您还必须包含动态属性。

{{#each model as |pic|}}
  <div>{{#link-to 'pic' pic}}<img src={{pic.image}} width="300">{{/link-to}}</div>
{{/each}}{{outlet}}

这里将图片模型传递给 link-to 助手。

但如果您直接访问特定图片的页面，这将不起作用。

同时将 models/images.js 重命名为 pics.js。您还必须从图片模型中删除 id 属性，因为 Ember.js 不允许手动设置 id。

Answer 3

你需要传递参数 link-to like

{{#link-to 'pic' pics}}

因为您正在从 params.id 访问 pic 路由中的 id 但没有发送任何参数。

Dynamic route code does nothing