vue列表跳转详情上一页下一页功能

要实现列表跳转详情页并且具有上一页下一页的功能，可以考虑以下步骤：

1. 在 Vue 组件中定义一个变量，用来表示当前详情页的索引，比如 `currentDetailIndex`。
2. 在模板中添加一个列表，点击该列表项触发 `goToDetail` 方法，该方法接收列表项的索引作为参数。
3. 在 `goToDetail` 方法中，设置 `currentDetailIndex` 为传入的索引，同时更新组件中的详情数据。
4. 在详情页模板中添加上一页按钮和下一页按钮，点击这些按钮触发 `goToPrevDetail` 和 `goToNextDetail` 方法，这些方法分别将 `currentDetailIndex` 减 1 或加 1，同时更新组件中的详情数据。
5. 如果 `currentDetailIndex` 小于 0 或大于等于详情总数，则禁用上一页或下一页按钮。

示例代码：

<template>
  <div>
    <ul>
      <li v-for="(item, index) in list" :key="item.id" @click="goToDetail(index)">
        {{ item.title }}
      </li>
    </ul>
    <div v-if="detail">
      <h2>{{ detail.title }}</h2>
      <p>{{ detail.content }}</p>
      <button @click="goToPrevDetail" :disabled="currentDetailIndex <= 0">上一页</button>
      <button @click="goToNextDetail" :disabled="currentDetailIndex >= details.length - 1">下一页</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { id: 1, title: '文章一' },
        { id: 2, title: '文章二' },
        // ...更多列表项
      ],
      details: [
        {
          id: 1,
          title: '文章一',
          content: '这是文章一的内容',
        },
        {
          id: 2,
          title: '文章二',
          content: '这是文章二的内容',
        },
        // ...更多详情
      ],
      currentDetailIndex: -1,
    }
  },
  computed: {
    detail() {
      return this.details[this.currentDetailIndex]
    },
  },
  methods: {
    goToDetail(index) {
      this.currentDetailIndex = index
    },
    goToPrevDetail() {
      this.currentDetailIndex--
    },
    goToNextDetail() {
      this.currentDetailIndex++
    },
  },
}
</script>