如何在vue里实现同步阻塞请求，请求完成之前不加载页面或组件？

Question

虽然说起来挺荒唐的，但是目前的确需要一个同步阻塞请求来阻止页面渲染。

理由是这样的的，我在根组件里发了个请求获取用户属性，并且props到各个子组件中。

    data() {
        return {
            userType: null,
        };
    },
    beforeMount() {
        this.getUserInfo();
    },
    methods: {
        getUserInfo() {
                    this.$http({
                        url: '/api/getUserInfo',
                        method: 'get',
                    }).then(res => {
                        this.userType = res.data.userType;
                    }).catch(err => {
                        console.log(err);
                    });
                },
}

子组件需要根据这个属性渲染 iview 表格和一些 v-if 控制的 Button，这个表格是在 beforemount 时根据 userType 渲染的。

export default {
    props: [
        'userType',
    ],
    
    ......
    methods: {
        addButtonToColumns() {}

    ......
    
    beforeMount() {
        this.addButtonToColumns();
    },
    
    ......
        

现在有这样的问题，可能用户在页面刚载入时就去点击链接跳转到子组件页面，但是 userType 属性还没请求下来，这样子组件显示的内容可能就不准确。虽然props更新了多数都会跟着更新，但是iview的tables columns没法重新载入，表格格式就不对了。

userType对所有组件都很重要，即使是完全阻塞整个页面在载入都可以。

请问是否有办法实现在我根组件完成 getUserInfo() 之前都不渲染页面？

Answer 1

getUserInfo函数数据请求下来，设置开关flag=true,页面最外层box v-if="flag",
flag默认false

Answer 2

加一个loading浮层动画吧，请求完成后隐藏。

Answer 3

你可以使用组件路由守卫beforeRouteEnter,请求到数据之后再调用next跳转路由