帮我写个vue3代码使 div style=display flex; padding-top 20px span五、家族史：span div style=border-bottom 1px solid #050505 planModelfamilyHistory_dictText template

你可以使用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输出的数据