Nuxt中URL用课程Slug时，如何通过ID获取API资源？

首先说你现有的方案：从Vuex store里通过slug找到对应ID再调API，这个方案是可行的，但算不上最优，下面给你拆解细节和更合理的实现方式：

现有方案的优缺点 #

• 优点：不用改动后端，靠前端现有逻辑就能实现，无需额外新增接口
• 缺点：
  • 若课程数量较多，全量存储在store会占用大量内存，拖慢页面加载速度
  • 一旦课程数据更新（比如slug未变但ID修改、新增同slug课程），store里的旧数据会导致你拿到错误ID，查不到正确课程
  • 首次加载需要拉取全量课程数据，首屏性能会受影响

更合理的实现方式 #

方案1：后端配合调整（优先推荐） #

既然slug不唯一，让后端新增一个接口，接收slug参数后返回所有匹配该slug的课程列表。前端这边：

• 进入/courses/<slug>/页面时，调用这个新接口
• 如果返回的课程只有1个，直接用它的ID调用详情API展示内容
• 如果返回多个，就给用户展示一个选择列表（比如带上课程名称、所属分类等区分信息），让用户选择要查看的课程

这种方式不用在store存全量课程，内存占用小，也不会因为数据过期出问题，逻辑更健壮。

方案2：优化现有前端逻辑（后端无法修改时） #

如果后端没法调整，那可以优化你现有的方案：

• 不要一次性拉取所有课程存入store，改成进入课程列表页时再加载数据，或者用懒加载分批拉取，降低首屏压力
• 进入详情页时，先验证store里slug对应的ID是否有效：比如调用一个轻量的验证接口（比如/api/course-type/<id>/exists/），或者请求详情API时如果返回404，就重新拉取一次课程列表再尝试
• 给store里的课程数据设置缓存过期时间，定期更新，避免拿到旧数据

总结 #

如果能说服后端调整接口，方案1是最优选择；如果后端无法改动，就用方案2优化现有逻辑，比直接依赖全量store数据更靠谱。

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