Svelte路由问题：如何通过ID从产品列表获取名称？

要通过URL中的产品ID获取对应名称，你可以复用产品数据数组，结合数组的find()方法匹配ID，具体实现如下：

1. 抽离共享产品数据（推荐） #

把产品数组单独放在可复用的文件中（比如src/lib/products.js），让列表页和详情页共用同一数据源，避免重复代码：

export const products = [
  {
    id: 0,
    name: "Superbike",
  },
  {
    id: 1,
    name: "Ultrabike",
  },
];

2. 修改产品详情页代码 #

在详情页导入产品数据，通过find()方法根据ID匹配对应产品。注意URL参数params.id是字符串类型，需要转成数字再匹配：

<script>
  import { products } from '$lib/products'; // 路径根据你的项目结构调整
  export let params = {};
  
  // 响应式计算当前产品：ID转数字后匹配数组项
  $: currentProduct = products.find(product => product.id === Number(params.id));
</script>

<h1>Product Details</h1>
{#if currentProduct}
  <p>Name: {currentProduct.name}</p>
  <p>ID: {currentProduct.id}</p>
{:else}
  <p>产品不存在</p>
{/if}
<p><a href="#/products/">Back to the list of products</a></p>

如果不想抽离数据，也可以直接把产品数组复制到详情页的<script>中，再用同样的find()逻辑处理。

关键细节 #

• $: 是Svelte的响应式声明，当params.id变化时，currentProduct会自动重新计算
• Number(params.id) 用于统一类型：URL参数默认是字符串，而产品ID是数字，类型一致才能匹配成功
• 用{#if}判断currentProduct，可以避免ID无效时出现报错

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