index.vue

<template>
    <my-card class="tw-flex">
        <a-menu style="flex: 0 0 100px" v-model="selectKeys">
            <a-menu-item key="UserInfo">{{ $t('profile') }}</a-menu-item>
            <a-menu-item key="ModifyPassword">{{ $t('user.modifyPassword') }}</a-menu-item>
            <a-menu-item key="MessageCenter">{{ $t('tabNotice') }}</a-menu-item>
            <a-menu-item key="ToDo">{{ $t('tabTodo') }}</a-menu-item>
        </a-menu>
        <div class="tw-flex-1 tw-ml-6">
            <component :is="currentCom" />
        </div>
    </my-card>
</template>

<script>
import UserInfo from './components/info.vue';
import MessageCenter from './components/message.vue';
import ToDo from './components/page_todo.vue';
import ModifyPassword from './components/modify_password.vue';

const components = {
    UserInfo,
    ToDo,
    MessageCenter,
    ModifyPassword,
};

export default {
    data() {
        return {
            selectKeys: ['UserInfo'],
        };
    },
    computed: {
        currentCom() {
            return components[this.selectKeys[0]];
        },
    },
};
</script>