vue 中用路由 params参数 在两个vue组件中传递列表某行的某个值怎么用 可以写个demo吗

当使用路由进行页面跳转时，可以通过params参数将数据传递到目标页面。在Vue中，获取params参数可以通过$route对象来获得。

下面是一个简单的示例：

1. 在路由中定义params参数

// router/index.js
import Vue from 'vue';
import Router from 'vue-router';
import Detail from '@/components/Detail.vue';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/detail/:id',
      name: 'Detail',
      component: Detail
    }
  ]
})

2. 在列表页面中点击某一行时，跳转到详情页，并将该行的id作为参数传递

<!-- List.vue -->
<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Age</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in list" :key="item.id" @click="goDetail(item.id)">
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.age }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { id: 1, name: 'Tom', age: 18 },
        { id: 2, name: 'Jerry', age: 22 },
        { id: 3, name: 'Jack', age: 20 }
      ]
    }
  },
  methods: {
    goDetail(id) {
      this.$router.push({ name: 'Detail', params: { id } });
    }
  }
}
</script>

3. 在详情页中获取传递的参数，并显示对应的数据

<!-- Detail.vue -->
<template>
  <div>
    <h1>Detail - {{ id }}</h1>
    <div>Name: {{ item.name }}</div>
    <div>Age: {{ item.age }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      item: {}
    }
  },
  computed: {
    id() {
      return this.$route.params.id;
    }
  },
  created() {
    // 根据id获取对应的数据
    this.item = this.getListById(this.id);
  },
  methods: {
    getListById(id) {
      const list = [
        { id: 1, name: 'Tom', age: 18 },
        { id: 2, name: 'Jerry', age: 22 },
        { id: 3, name: 'Jack', age: 20 }
      ];
      return list.find(item => item.id === parseInt(id));
    }
  }
}
</script>

在上述代码中，点击列表中的某一行时会跳转到详情页，并将该行的id作为参数传递。在详情页中，可以通过$route.params.id获取到传递的参数，并根据该参数从列表数据中获取对应的数据，然后显示出来。