teacher-assessment/src/views/reviewManagement/ReviewManagementDetail.vue

<template>
    <div class="main_container">
      <component :is="curentComponent"></component>
  </div>
</template>


<script setup lang="ts">
import { useRoute,useRouter } from 'vue-router';
import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
import Step1Component from './stepComponent/step1Component/Step1Component.vue';
import Step2Component from './stepComponent/step2Component/Step2Component.vue';
import Step3Component from './stepComponent/step3Component/Step3Component.vue';
import Step4Component from './stepComponent/step4Component/Step4Component.vue';
import GenerateReviewCode from './stepComponent/step4Component/GenerateReviewCode.vue';

const route = useRoute()
const router = useRouter()

const curentComponent = computed(()=>{
  switch(route.params.stepName){
    case 'evaluationData':
      return Step1Component
    case 'teachingRelationship':
      return Step2Component
    case 'questionnaireTemplate':
      return Step3Component
    case 'reviewAccount':
      return Step4Component
    case 'generateReviewCode':
      return GenerateReviewCode
    case 'parameterSetting':
      break
    case 'evaluationProgress':
      break
    case 'generateAnalysis':
      break
    default:
      router.replace('/login')
      break
  }
})


onBeforeUnmount(()=>{
  // 清除 评价管理详情页的标题
  sessionStorage.removeItem('evaluationManageDetailName')
})
</script>



<style lang="scss" scoped>
.main_container {
  height: 100vh !important;
}

</style>