vue3+axios 实现小说阅读的点击按钮跳转到上一章或下一章节的功能

可以通过以下步骤实现：

1. 在Vue组件中引入axios，并在data中定义一个变量用于存储当前章节的id。

import axios from 'axios'

export default {
  data() {
    return {
      currentChapterId: '',
      // 其他数据...
    }
  },
  // 其他代码...
}

2. 在mounted生命周期中，通过axios获取当前章节的id，并将其赋值给currentChapterId。

mounted() {
  axios.get('/api/currentChapterId')
    .then(res => {
      this.currentChapterId = res.data.chapterId
      // 其他逻辑...
    })
    .catch(err => {
      console.log(err)
    })
}

3. 在模板中渲染按钮，并通过@click事件监听按钮的点击事件，在方法中发送axios请求获取上/下一章节的id，并更新currentChapterId。

<template>
  <div>
    <!-- 上一章按钮 -->
    <button @click="prevChapter">上一章</button>
    
    <!-- 下一章按钮 -->
    <button @click="nextChapter">下一章</button>
    
    <!-- 其他内容... -->
  </div>
</template>

<script>
  import axios from 'axios'

  export default {
    data() {
      return {
        currentChapterId: '',
        // 其他数据...
      }
    },
    mounted() {
      axios.get('/api/currentChapterId')
        .then(res => {
          this.currentChapterId = res.data.chapterId
          // 其他逻辑...
        })
        .catch(err => {
          console.log(err)
        })
    },
    methods: {
      prevChapter() {
        axios.get(`/api/prevChapterId?currentChapterId=${this.currentChapterId}`)
          .then(res => {
            this.currentChapterId = res.data.chapterId
            // 更新章节内容...
          })
          .catch(err => {
            console.log(err)
          })
      },
      nextChapter() {
        axios.get(`/api/nextChapterId?currentChapterId=${this.currentChapterId}`)
          .then(res => {
            this.currentChapterId = res.data.chapterId
            // 更新章节内容...
          })
          .catch(err => {
            console.log(err)
          })
      },
      // 其他方法...
    }
  }
</script>

4. 在后端服务器中处理上/下一章节的请求，并返回对应的章节id。

const express = require('express')
const app = express()

// 获取当前章节id
app.get('/api/currentChapterId', (req, res) => {
  const currentChapterId = '123' // 假设当前章节id为123
  res.send({ chapterId: currentChapterId })
})

// 获取上一章节id
app.get('/api/prevChapterId', (req, res) => {
  const currentChapterId = req.query.currentChapterId
  const prevChapterId = '122' // 假设上一章节id为122
  res.send({ chapterId: prevChapterId })
})

// 获取下一章节id
app.get('/api/nextChapterId', (req, res) => {
  const currentChapterId = req.query.currentChapterId
  const nextChapterId = '124' // 假设下一章节id为124
  res.send({ chapterId: nextChapterId })
})

app.listen(3000, () => {
  console.log('Server running on port 3000.')
})

以上是简单的实现方法，具体根据实际需求进行调整。