vue 列表页跳详情

Vue 列表页跳转至详情页的实现方式有很多种。以下是其中一种常用的实现方式：

首先，在列表页中，需要为每一项列表内容绑定一个点击事件，当用户点击某一项时，跳转至详情页。可以使用Vue Router来管理路由。

在列表项的点击事件中，可以调用Vue Router提供的编程式导航方法`this.$router.push()`来跳转至详情页。可以使用params参数来传递需要展示的相关数据。示例代码如下：

<!-- 列表页 -->
<template>
  <div>
    <ul>
      <li v-for="item in list" :key="item.id" @click="goToDetail(item.id)">{{ item.title }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { id: 1, title: '详情1' },
        { id: 2, title: '详情2' },
        { id: 3, title: '详情3' }
      ]
    };
  },
  methods: {
    goToDetail(id) {
      this.$router.push({ name: 'detail', params: { id } });
    }
  }
};
</script>

接下来，在Vue Router的路由配置文件中，需要定义详情页的路由规则。示例代码如下：

import Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router);

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

最后，在详情页的组件中，可以通过`$route.params`来获取传递过来的参数，根据参数展示对应的详情内容。示例代码如下：

<!-- 详情页 -->
<template>
  <div>
    <h2>{{ detail.title }}</h2>
    <p>{{ detail.content }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      detail: {}
    };
  },
  created() {
    this.fetchDetail();
  },
  methods: {
    fetchDetail() {
      // 根据this.$route.params.id发送请求，获取对应的详情数据
      const id = this.$route.params.id;
      // 发送请求获取详情数据，并将数据赋值给this.detail
    }
  }
};
</script>

通过以上步骤，就可以实现在Vue中从列表页跳转至详情页，同时传递参数并展示相应的详情内容。