如何通过Vue路由参数获取并返回对应ID的组件动态数据？

当然可以实现这个需求啦！这在Vue项目里是非常常见的场景，我来给你拆解具体的实现步骤：

1. 在data()中存储多ID关联数据 #

首先你可以在组件的data()里定义一个数据集，用数组或者对象来存储不同ID对应的所有关联数据。比如用数组的话，每个元素是包含id和其他属性的对象：

export default {
  data() {
    return {
      // 存储多个ID对应的关联数据
      itemList: [
        { id: '1', name: 'Vue基础入门', desc: '适合新手的Vue核心概念讲解' },
        { id: '2', name: '路由进阶', desc: 'Vue Router的高级用法实战' },
        { id: '3', name: '组件通信', desc: 'Vue组件间多种通信方式详解' }
      ]
    }
  }
}

2. 用计算属性匹配当前路由ID的数据 #

为了让视图能自动响应路由ID的变化，推荐用计算属性来筛选对应的数据，这样每次路由参数变化时，计算属性会自动重新计算：

computed: {
  currentItem() {
    // 从路由参数中获取当前ID
    const currentId = this.$route.params.id
    // 从数据集里匹配对应ID的数据
    return this.itemList.find(item => item.id === currentId) || {}
  }
}

3. 在视图中渲染对应数据 #

现在你就可以在模板里直接使用这个计算属性了，比如：

<template>
  <div class="item-detail">
    <h2>{{ currentItem.name }}</h2>
    <p>{{ currentItem.desc }}</p>
  </div>
</template>

额外提示：异步获取数据的情况 #

如果你的数据不是静态写在data()里，而是需要从后端接口获取，你可以在组件的created钩子中请求数据，然后把返回的数据集存到data()的变量里，计算属性的逻辑还是一样的：

created() {
  // 假设这里是调用接口获取数据
  fetch('/api/item-list')
    .then(res => res.json())
    .then(data => {
      this.itemList = data
    })
}

这样不管路由ID怎么变，视图都会自动显示对应ID的关联数据啦～

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