在Vue-Form-Wizard中根据当前步骤中的选择动态加载组件

<template>
  <vue-form-wizard @on-complete="onComplete">
    <tab-content title="Step 1" icon="fa fa-user">
      <!-- Step 1 content -->
    </tab-content>
    <tab-content title="Step 2" icon="fa fa-envelope">
      <!-- Step 2 content -->
    </tab-content>
    <tab-content title="Step 3" icon="fa fa-check">
      <!-- Step 3 content -->
    </tab-content>
  </vue-form-wizard>
</template>

<script>
import VueFormWizard from 'vue-form-wizard'
import 'vue-form-wizard/dist/vue-form-wizard.min.css'

export default {
  components: {
    VueFormWizard
  },
  methods: {
    onComplete() {
      // Form completion logic
    }
  }
}
</script>

<template>
  <vue-form-wizard @on-complete="onComplete">
    <tab-content title="Step 1" icon="fa fa-user">
      <component :is="selectedComponent"></component>
    </tab-content>
    <tab-content title="Step 2" icon="fa fa-envelope">
      <component :is="selectedComponent"></component>
    </tab-content>
    <tab-content title="Step 3" icon="fa fa-check">
      <component :is="selectedComponent"></component>
    </tab-content>
  </vue-form-wizard>
</template>

<script>
import VueFormWizard from 'vue-form-wizard'
import 'vue-form-wizard/dist/vue-form-wizard.min.css'

import Step1Component from './Step1Component.vue'
import Step2Component from './Step2Component.vue'
import Step3Component from './Step3Component.vue'

export default {
  components: {
    VueFormWizard,
    Step1Component,
    Step2Component,
    Step3Component
  },
  data() {
    return {
      selectedComponent: null
    }
  },
  methods: {
    onComplete() {
      // Form completion logic
    }
  },
  watch: {
    // 监听当前步骤的选择，根据选择设置对应的组件
    '$route.params.step'(newStep) {
      switch (newStep) {
        case 'step1':
          this.selectedComponent = 'Step1Component'
          break
        case 'step2':
          this.selectedComponent = 'Step2Component'
          break
        case 'step3':
          this.selectedComponent = 'Step3Component'
          break
        default:
          this.selectedComponent = null
          break
      }
    }
  }
}
</script>