Ember.js路由参数获取失败，无法按店铺ID筛选商品

看起来你是在Ember.js项目里遇到了路由参数传递的问题——URL变了但拿不到shop_id，导致没法请求对应店铺的商品。我来一步步帮你捋清楚命名规范和配置方式：

一、先明确各部分的合理命名（遵循Ember最佳实践） #

• Model名称：商品列表用product完全没问题（对应你的商品数据模型，单数驼峰式）；店铺模型用shop，但商品列表路由的model依然是product，只是通过shop_id过滤数据。
• Route名称：推荐用嵌套路由shops.products（表示“某店铺下的商品”），结构更清晰也符合RESTful风格；如果不想嵌套，也可以用一级路由shop-products。
• Controller名称：对应路由来命名——嵌套路由的控制器是shops/products.js（类名ShopsProductsController），一级路由则是shop-products.js（类名ShopProductsController）。

二、关键：Router配置必须包含动态段 #

问题核心是你的路由没定义动态参数段，导致URL里的店铺ID无法被捕获到params里。修改router.js：

方案1：嵌套路由（推荐） #

Router.map(function() {
  this.route('shops', function() {
    // 动态段`:shop_id`会捕获URL中的店铺ID，绑定到params.shop_id
    this.route('products', { path: ':shop_id/products' });
  });
});

此时URL格式为：/shops/123/products（123是店铺ID）

方案2：一级路由 #

Router.map(function() {
  this.route('shop-products', { path: 'shops/:shop_id/products' });
});

此时URL格式同样是：/shops/123/products

三、在路由的model方法中获取参数并请求数据 #

对应路由文件（比如app/routes/shops/products.js）里，现在就能拿到params.shop_id了：

import Route from '@ember/routing/route';
import { inject as service } from '@ember/service';

export default class ShopsProductsRoute extends Route {
  @service store; // 注入Ember Data的store服务

  model(params) {
    // 现在params里能拿到shop_id了！
    console.log('店铺ID:', params.shop_id);
    
    // 请求该店铺的商品列表（假设后端接口接受shop_id作为查询参数）
    return this.store.query('product', { shop_id: params.shop_id });
  }
}

四、正确生成店铺跳转链接 #

一定要用Ember的link-to助手生成链接，确保参数被正确传递到路由：

{{!-- 在你的店铺列表模板里 --}}
{{#each shops as |shop|}}
  <div class="shop-item">
    {{#link-to 'shops.products' shop.id}}
      查看{{shop.name}}的全部商品
    {{/link-to}}
  </div>
{{/each}}

如果用的是一级路由shop-products，把link-to的路由名改成'shop-products'即可。

为什么之前拿不到params？ #

你之前的Product路由没有定义动态段:shop_id，所以即使URL里加了店铺ID，路由也不会把它识别为参数；同时如果链接不是用link-to生成的，也可能导致参数没有正确绑定到路由的params对象里。

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