vue-ptc/src/pages/fill-order/index.vue

<template>
  <div class="p-fill-order">
    <h3 class="ptc-title">Fill Order</h3>
    <component :is="Component" @next="next" />
  </div>
</template>

<script setup lang="ts">
import { useRoute, useRouter } from 'vue-router'
import StepOne from './StepOne.vue'
import StepTwo from './StepTwo.vue'
import StepThree from './StepThree.vue'

const router = useRouter()
const step = +((useRoute().query.step || '0') as string)
const Component = [StepOne, StepTwo, StepThree][step]

function next() {
  router.push({
    path: '',
    query: {
      step: step + 1,
    },
  })
}
</script>

<style lang="scss">
.p-fill-order {
  background: #f7f7f7;
}
</style>