ExpressJS结合hbs带ID参数路由时能否传递多个数组？

不管你的路由是否带ID参数，都完全可以给hbs模板传递任意多个数组——这和你在首页传两个数组的逻辑本质上是一样的。路由参数只是用来定位具体资源，不会限制你传递的数据数量或类型。

具体实现示例 #

给你写个实际的代码参考，看看带ID参数的路由怎么传多个数组：

服务器端路由代码 #

// 带ID参数的商品详情页路由
app.get('/product/:id', (req, res) => {
  // 模拟要传递的多组数组数据
  const productSpecs = [
    { key: '屏幕尺寸', value: '15.6英寸' },
    { key: '处理器', value: 'Intel i7' },
    { key: '内存', value: '16GB' }
  ];
  const relatedProducts = ['笔记本支架', '无线鼠标', '键盘膜'];
  const userComments = [
    { user: '小A', content: '用了半个月，很流畅！' },
    { user: '小B', content: '性价比很高，推荐！' }
  ];

  // 获取路由中的ID参数
  const productId = req.params.id;

  // 把ID和所有数组数据一起传给hbs模板
  res.render('product-detail', {
    productId: productId,
    specs: productSpecs,
    related: relatedProducts,
    comments: userComments
  });
});

hbs模板使用示例 #

在product-detail.hbs里，你可以像处理首页数组一样遍历这些数据：

<h2>商品ID: {{productId}}</h2>

<h3>商品参数</h3>
<ul>
  {{#each specs}}
    <li>{{key}}: {{value}}</li>
  {{/each}}
</ul>

<h3>相关配件</h3>
<ul>
  {{#each related}}
    <li>{{this}}</li>
  {{/each}}
</ul>

<h3>用户评论</h3>
<div class="comments">
  {{#each comments}}
    <p><strong>{{user}}:</strong> {{content}}</p>
  {{/each}}
</div>

关键注意点 #

• 路由参数（比如:id）只是请求的一部分，用来告诉服务器用户要访问哪个具体资源，和你传递给模板的数据完全独立。
• 你可以把所有需要的数据打包成一个对象，作为res.render()的第二个参数传递，数组、字符串、对象、数字等类型都支持。
• 如果你的数组数据是从数据库、API接口获取的，只需要在路由处理函数里先完成数据获取，再把所有数据一起传给模板就行，逻辑和首页完全一致，只是多了获取路由参数的步骤。

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