vue 一个页面根据状态渲染不同的组件 使用currentView动态渲染

1.在当前vue页面导入所需要的组件
组件目录：

注：index.vue就是要渲染的页面
在data中定义变量：

components: {
    submitVeterans: () => import("./submitVeterans"),
    veteransWait: () => import("./veteransWait"),
    veteransFail: () => import("./veteransFail"),
    veteransSuccess: () => import("./veteransSuccess"),
  },

2.根据接口返回的状态值渲染不同的组件

3.完整代码

<template>
  <div class="appoint">
    <div :is="currentView" @getStatus="getStatus"></div>
  </div>
</template>

<script>
import { getMyApply } from "@/api/course";
export default {
  components: {
    submitVeterans: () => import("./submitVeterans"),
    veteransWait: () => import("./veteransWait"),
    veteransFail: () => import("./veteransFail"),
    veteransSuccess: () => import("./veteransSuccess"),
  },
  data() {
    return {
      currentView: "",
      status: "", // 状态值
      token:
        "eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX25hbWUiOiIxNzYzMDIxNjAyNCIsInNjb3BlIjpbImFsbCJdLCJuaWNrbmFtZSI6IlBPUE_mjqLntKLogIU5NTIiLCJpZCI6MTM0NjcyNDIxMjc1NjgyODE2MiwiZXhwIjoxNjI4MTQ0MjUzLCJqdGkiOiI4MmQzNTc1OC1mNDNkLTQ1YTMtYTA3MS1hZGUwNWY4NGQ0OTkiLCJjbGllbnRfaWQiOiJwb3J0YWwtYXBwIn0.hodSrrsplqOfMrUJ6aVSLMdnS93flc0uhR-lB5d0gZBi_6ApJkOES0zf0SUzxPxAimoPQfRZ3I9X_rzunWJMgNCXNdjKcIhDtn08o24Cc89_j8mWityp_NAgBI6S0LYynEM0lxLdyeuLIXoqjYclIBBXeM_lDFtBBAGaAFdjHII",
      //   token: "",
    };
  },
  created() {
    this.getactivity();
  },

  methods: {
    getactivity() {
      getMyApply(this.token).then((res) => {
        console.log(res);
        console.log(res.data.code);
        if (res.data.code == 200) {
          //获取他的返回值 用返回值判断
          if (this.status == 1) {
            //   显示页面：提交资料
            this.currentView = "submitVeterans";
            //     显示页面：审核失败
            // this.currentView = "veteransFail";
          } else if (this.status == 2) {
            //   显示页面：审核中
            this.currentView = "veteransWait";
          } else if (this.status == 3) {
            //  显示页面：审核成功
            this.currentView = "veteransSuccess";
          } else {
            //   显示页面提交资料
            this.currentView = "veteransFail";
          }
        }
      });
    },
    
  },
};
</script>
<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
</style>

注：该文章只是自己开发时的记录。