如何在axios post请求执行完成后切换Vue3组件

针对你不需要vue-router的简单组件切换需求，直接使用Vue原生的条件渲染即可实现，修改成本极低。

注意事项 #

原代码存在无限更新问题：updated钩子中调用getSession会修改cards数据，进而再次触发updated钩子形成死循环，建议直接删除updated钩子中的getSession调用，仅在新增/修改会话后手动调用刷新即可。

修改后的完整SessionComponent代码 #

/*This is My session Component*/
<template>
    <div>
        <h1 class="title_session">Choose or create a session</h1>
        <select id="session" name="session" @blur.prevent="getSessionName($event)">
            <option disabled selected value="">Select a session</option>
            <option v-for="card in cards" :key="card.id">{{ card.session }}</option>
        </select>

        <label for="createSession">Create a new session</label>
        <input id="createSession" ref="session" type="text" >
        <!-- 新增触发按钮 -->
        <button @click="createSession">确认提交会话</button>

        <!-- 条件显示Student组件，可通过props传递所需参数 -->
        <StudentComponent v-if="showStudent" :sessionName="sessionName" />
    </div>
</template>

<script>
// 导入Student组件
import StudentComponent from './StudentComponent.vue'
const AXIOS = 'http://127.0.0.1:8000/'
export default {
    // 注册组件
    components: {
        StudentComponent
    },
    AXIOS: AXIOS,
    name: "Session.vue",
    data() {
        return {
            cards: {},
            sessionName: '',
            // 新增控制Student组件显示的状态
            showStudent: false
        }
    },
    methods: {
        getSession() {
            axios.get(AXIOS + 'session')
                .then(response => this.cards = response.data)
                .catch(error => console.log(error));
        },
        createSession() {
            this.sessionName = this.$refs.session.value;
            console.log(this.sessionName)
            axios.post(AXIOS + 'session', {
                sessionName: this.sessionName
            })
                .then(response => {
                    this.sessionName = response.data
                    // 请求成功后显示Student组件
                    this.showStudent = true
                    // 刷新会话列表，替代原来的updated钩子调用
                    this.getSession()
                })
                .catch(error => console.log(error))
        },

        getSessionName(event) {
            this.sessionName = event.target.value;
            console.log(this.sessionName)
            axios.post(AXIOS + 'session', {
                sessionName: this.sessionName
            })
                .then(response => {
                    this.sessionName = response.data
                    // 请求成功后显示Student组件
                    this.showStudent = true
                })
                .catch(error => console.log(error))
        },
    },

    mounted() {
        console.log("How many time")
    },

    created() {
        this.getSession()
    },
    // 移除原来的updated钩子调用，避免死循环
}
</script>

扩展说明 #

如果需要实现多个组件的切换、或者需要回退功能，也可以使用动态组件<component :is="currentComponent"></component>，只需要修改currentComponent的值为对应注册的组件名即可完成切换，同样无需依赖路由。

内容的提问来源于stack exchange，提问作者Bastien