vue 同步加载_如何在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() 之前都不渲染页面？

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

vue 递归创建菜单_如何在Vue中创建类似中等的突出显示菜单
vue 递归创建菜单 by Taha Shashtari 由Taha Shashtari 如何在Vue中创建类似中等的突出显示菜单 (How to Create a Medium-Like Highl ...
vue中数组长度_如何在Vue.js中获取计算数组的长度
我使用的是一个计算方法,它检查用户是否单击了搜索输入,然后检查JSON文件,以将用户的查询与JSON文件中的字符串匹配.这是我当前的代码: computed: { filteredPrizesByQu ...
删除vue打包大小限制_如何优化 Vue 祖传代码
目录前言为什么要优化从哪里开始下手现在开始 1.代码压缩 2.删除一些废弃的页面 3.使用 cdn 优化 4.修改路由引入方式结果前言 "这页面加载也太慢了!",一个宁 ...
vue传递数组对象_详解vue组件三大核心概念
前言本文主要介绍属性.事件和插槽这三个vue基础概念.使用方法及其容易被忽略的一些重要细节.如果你阅读别人写的组件,也可以从这三个部分展开,它们可以帮助你快速了解一个组件的所有功能. 本文的代码请猛 ...
get vue 和set 用法_深入剖析Vue源码 - 数据代理，关联子父组件
简单回顾一下这个系列的前两节,前两节花了大篇幅讲了vue在初始化时进行的选项合并.选项配置是vue实例化的第一步,针对不同类型的选项,vue提供的丰富选项配置策略以保证用户可以使用不同丰富的配置选项. ...
vue 二维数组_最近研究Vue源码时我发现的一些好玩函数
来源 | segmentfault.com/u/chinamasters 作者 | chinamasters 最近在深入研究vue源码,把学习过程中,看到的一些好玩的的函数方法收集起来做分享,希望对大 ...
oclick vue 传参函数_详解Vue计算属性和侦听属性
关注[搜狐技术产品]公众号,第一时间获取技术干货作者介绍: 本期特邀作者:浪里行舟 Github博客2600 star作者,专注于前端领域.个人公众号:「前端工匠」,致力于打造适合初中级工程师能够快 ...
vue 回车查询按钮_从零开始学习vue
在github搜小程序我们可以看到许多用许多用vue开发的实例. 到底什么是vue,我们不妨浪费一天时间来了解一下. 一.什么是vue Vue是一个JavaScript框架.作者是国内常年混迹知乎的一 ...
vue插槽面试题_关于前端Vue框架的面试题，面试官可能会问到哪些。？
这年头,程序员面试都讲究坐姿,姿势不对,努力白费. 参照下图,请同学们对号入座. 回想一下,自己平时面试的坐姿,你在面试官眼里,大概是什么形象,可能是工程师,也可能是键盘侠,或者找麻烦的. 当然了,想 ...
vue warning如何去掉_详解 vue 组件三大核心概念
前言本文主要介绍属性.事件和插槽这三个vue基础概念.使用方法及其容易被忽略的一些重要细节.如果你阅读别人写的组件,可以从这三个部分展开,它们可以帮助你快速了解一个组件的所有功能. 本文的代码请猛戳 ...

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

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

最新文章

热门文章