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

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

理由是这样的的,我在根组件里发了个请求获取用户属性,并且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() 之前都不渲染页面?

回答:

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

回答:

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

回答:

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

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注