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>
注：该文章只是自己开发时的记录。
