vue-ptc/src/pages/appointment/index.vue

<template>
  <div class="p-appointment" :class="{ 'bg-gray': state.step < 5 }">
    <component :is="Component" />
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { onBeforeRouteLeave, useRouter } from 'vue-router'
import StepOne from './StepOne.vue'
import StepTwo from './StepTwo.vue'
import StepThree from './StepThree.vue'
import StepFour from './StepFour.vue'
import StepFive from './StepFive.vue'
import StepSix from './StepSix.vue'
import { state } from './store'
;(window as any).router = useRouter()

const Component = computed(
  () => [StepOne, StepTwo, StepThree, StepFour, StepFive, StepSix][state.step]
)

onBeforeRouteLeave((to, from) => {
  console.log(to)
  if (state.step > 0) {
    console.log(111)
    state.step--
    return false
  }
})
</script>

<style lang="scss" src="./index.scss"></style>