How does vue.js ensure that the page is rendered only after the asynchronous fetch is successful?

problem description

background:
vue.js project requires an asynchronous request to get the configuration, which is used on many pages.

description:
after verifying login information, you need to request some configuration items from the server. This configuration is defined by some fields, such as

.
{
    "config": {
        "x": 1,
        "y": 2
    }
}

so how do you ensure that the page is not rendered until the asynchronous request is successfully fetched?

Jun.23,2022

then why don't you just mount it after the data request? Something like this:

ajax({
    success:function (){
        new Vue({
            el:'-sharpapp',
            ...
        })
    }
})

  1. this.$nextTick
  2. async function of es6
  3. use vmurcloak;
    refer to the official website https://cn.vuejs.org/v2/api/-sharp...
    and request method is written in create

vue-router you can request navigation
ide/advanced/data-fetching.html-sharp%E5%9C%A8%E5%AF%BC%E8%88%AA%E5%AE%8C%E6%88%90%E5%89%8D%E8%8E%B7%E5%8F%96%E6%95%B0%E6%8D%AE" rel=" nofollow noreferrer "> vue-router data acquisition


create a Promise to request

(async () => {
    let config = await getConfig()
    // 
    1. `config`
})()
Menu