ygtx_worklog/ygtx-ui/src/views/index.vue

<template>
  <component :is="currentComponent" />
</template>

<script>
import { ref, computed } from 'vue'
import { mapState } from 'pinia'
import useUserStore from '@/store/modules/user'
import { getRouteNameByPostType } from '@/utils/routeMap'
import { getCurrentUserHomePage } from '@/api/system/postHomePage'
import Index0 from './index0.vue'
import Index1 from './index1.vue'
import Index2 from './index2.vue'

export default {
  name: 'Index',
  components: {
    Index0,
    Index1,
    Index2
  },
  setup() {
    const homePageRouteName = ref('')
    
    // 根据路由名称确定要加载的组件
    const currentComponent = computed(() => {
      // 直接使用homePageRouteName值作为组件名称，提高代码简洁性
      // 由于组件已注册，Vue会自动解析组件名称
      return homePageRouteName.value || 'Index0'
    })

    // 获取首页路由名称
    const fetchHomePageRouteName = async () => {
      try {
        // 调用后端接口获取首页配置
        const response = await getCurrentUserHomePage()
        console.log(response);
        if (response.code === 200 && response.data) {
          // 使用返回数据中的homePageType值
          const homePageType = response.data.homePageType
          homePageRouteName.value = await getRouteNameByPostType(homePageType)
        } else {
          // 接口调用成功但无数据时使用默认首页
          console.warn('未获取到首页配置数据，使用默认首页')
          homePageRouteName.value = 'Index0'
        }
      } catch (error) {
        console.error('获取首页配置失败:', error)
        // 接口调用失败时使用默认首页
        homePageRouteName.value = 'Index0'
      }
    }

    console.log(homePageRouteName.value);

    return {
      homePageRouteName,
      currentComponent,
      fetchHomePageRouteName
    }
  },
  computed: {
    ...mapState(useUserStore, ['postType'])
  },
  async mounted() {
    // 组件挂载时获取首页路由名称
    if (this.fetchHomePageRouteName) {
      this.fetchHomePageRouteName()
    }
  },
  watch: {
    // 监听postType变化
    postType: {
      handler: async function(newVal) {
        if (this.fetchHomePageRouteName) {
          this.fetchHomePageRouteName()
        }
      },
      immediate: true
    }
  }
}
</script>