如何确保vue组件不显示

Question

我正在使用一个像角色交叉路口一样依赖于用户的角色的组件，并使用一个beforeCreate()钩子将用户重定向到特定的路线。

我不希望在重定向用户时显示组件模板，因此在data()中添加了一个称为showComponent的状态并将其设置为false，然后将v-if="showComponent"添加到了主模板容器中。

问题是，当我在showComponent的末尾将true设置为beforeCreate()时，在某种程度上该组件有一定的时间（在几分之一秒内）被呈现在重定向用户之前。如何确定未显示模板？

这里是脚本代码：

<script>
    export default {
        name: "role",
        data() {
            return {
                showComponent: false,
            }
        },
        beforeCreate() {
            this.showComponent= false;
            s_auth.get(false, true).then(response => {
                if (response.role.name === 'MANAGER') {
                    this.$router.push('/recipe-manager');
                } else if (response.role.name === 'CLIENT') {
                    this.$router.push('/client');
                } else if (response.role.name === 'JOE') {
                    this.$router.push('/joe');
                } 
                this.showComponent = true
            })
        }     
    }
</script>

Answer 1

将this.showComponent添加到else：

beforeCreate() {
    this.showComponent= false;
    s_auth.get(false, true).then(response => {
        if (response.role.name === 'MANAGER') {
            this.$router.push('/recipe-manager');
        } else if (response.role.name === 'CLIENT') {
            this.$router.push('/client');
        } else if (response.role.name === 'JOE') {
            this.$router.push('/joe');
        } else { // add else here to change showComponent value when there is no route change
            this.showComponent = true
        }
    })
}