Vue3 实现分页显示数据：使用 Vue Router 进行页面跳转

你可以使用 Vue Router 来实现页面的分页显示和跳转。首先需要安装 Vue Router，然后在 main.js 文件中配置路由。

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/page1', component: Page1 },
    { path: '/page2', component: Page2 },
  ]
})

const app = createApp(App)
app.use(router)
app.mount('#app')

接下来在 App.vue 文件中使用路由和分页显示数据。

<template>
  <div>
    <router-link to='/page1'>页码1</router-link>
    <router-link to='/page2'>页码2</router-link>

    <div v-if='showPage1'>
      <div style='display: flex; padding-top: 20px'>
        <span>五、家族史：</span>
        <div style='border-bottom: 1px solid #050505'>
          {{ planModel.familyHistory_dictText }}
          <template v-if='planModel.otherFamilyHistory != null && planModel.otherFamilyHistory !== undefined'>
            &nbsp;&nbsp;
            {{ planModel.otherFamilyHistory }}
          </template>
        </div>
      </div>
    </div>

    <div v-if='showPage2'>
      <div style='display: flex; padding-top: 20px'>
        <span>一、既往病史：</span>
        <div style='border-bottom: 1px solid #050505'>
          {{ planModel.pastHistory_dictText }}
          <template v-if='planModel.otherPastHistory != null && planModel.otherPastHistory !== undefined'>
            &nbsp;&nbsp;
            {{ planModel.otherPastHistory }}
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showPage1: false,
      showPage2: false,
      planModel: {
        familyHistory_dictText: '家族史数据',
        otherFamilyHistory: '其他家族史数据',
        pastHistory_dictText: '既往病史数据',
        otherPastHistory: '其他既往病史数据',
      }
    }
  },
  mounted() {
    // 根据当前页面路径显示对应的分页内容
    if (this.$route.path === '/page1') {
      this.showPage1 = true
    } else if (this.$route.path === '/page2') {
      this.showPage2 = true
    }
  },
  watch: {
    // 监听路由变化，更新分页内容的显示
    '$route'(to) {
      this.showPage1 = false
      this.showPage2 = false

      if (to.path === '/page1') {
        this.showPage1 = true
      } else if (to.path === '/page2') {
        this.showPage2 = true
      }
    }
  }
}
</script>

这样，当你点击页码1或页码2时，页面会跳转到对应的路径，并显示相应的 div 输出的数据。