Practice of two ways of obtaining data in vue + simple skeleton screen

There are two ways to get data in vue. The most important introduction is: get after navigation is completed: first complete the navigation, and then get the data in the next component life cycle hook. During data acquisition, an indication such as "loading" is displayed. Obtain before navigation is completed: Before navigation is completed, obtain data from the guard that enters the route, and perform navigation after successful data acquisition. From a technical point of view, both methods are good - it depends on the user experience you want. So let's practice these two ways of obtaining data, as well as a little thinking about user experience optimization.
1. First of all, the first one: Obtain after navigation is completed. This method is what we mostly use (because we may only know this method ^{V at the} beginning ). When using this method, we will immediately navigate and render the component, and then get the data in the component's created hook. This gives us the opportunity to display a loading state during data acquisition, as well as different loading states between different views. Everyone knows how to obtain data. Here are some things about user experience: Before the data is obtained, the page components have been loaded, but the data has not been obtained and rendered, so in the process, we cannot load the component that displays the data in the page. , But there must be a loading component or skeleton screen. When the page data acquisition fails, it can be understood as the request timeout, what we want to show is the disconnected component. If it is a list page, consider the case of empty data, which is a component of an empty prompt. So, our page must have these basic three parts, put the code:

     <template>
    <div class="list">
        <!--加载中或者骨架屏-->
        <div v-if="loading">
       
        </div>

        <!--请求失败，即断网的提示组件-->
        <div v-if="error">
      
        </div>

        <!--页面内容-->
        <div v-if="requestFinished" class="content">
            <!--页面内容-->
            <div v-if="!isEmpty">
                <!--例如有个列表，当然肯定还会有其他内容-->
                <ul></ul>
            </div>

            <!--为空提示组件-->
            <div v-else>空空如也</div>
        </div>
    </div>
</template>

In this case of acquiring data, we come in by default to display the content of loading or skeleton screen, and then if the data acquisition fails (that is, the request timeout or the network is disconnected), the component of the error is loaded and other components are hidden. If the data request is successful, load the content component and hide other components. If it is a list page, there may be two pieces of content in the content component, a list and an empty prompt, so at this time, it is also necessary to determine whether to load the content or load an empty prompt based on the obtained data. Second, the second method: Get before the navigation is complete. This method is to request data in the beforeRouteEnter hook of the page, and the navigation page will only be jumped to after the data is successfully obtained.

 beforeRouteEnter (to, from, next) {        
    api.article.articleDetail(to.query.id).then(res=> {            
        next(vm => {                
            vm.info = res.data;                
            vm.loadFinish = true            
        })        
    })    
},

1. Everyone knows that this in the hook beforeRouteEnter cannot be used yet, so if we want to assign a value or call a method, we can only process it in the callback function of the next() method. The first parameter of this callback function represents this , He will operate after the component is initialized successfully.
2. I think that many times our api or axios methods are mounted on the prototype of vue. Since this cannot be used here, we can only introduce api or our axios into page components.
3. Assignment operations can also be written in the method method, but the method of calling this assignment method is still vm.yourFunction().
4. Empty prompts, disconnection processing, etc. are the same as the first method, but since the data is first obtained and then jump to load the component, we do not need to display the skeleton screen or the loading component in the expected page. Yes, we need to have a loading prompt before the current page enters, that is, at the time of the previous page, such as the progress bar at the top of the page. In this way, the user experience is more friendly, and the user does not know the result that the request s is slower and the user does not respond for a long time. The global progress bar at the top of the page can be set in main.js through router.beforeEach(to, from, next) {}. When the page routing changes, the progress bar at the top of the page is displayed, and the progress bar is hidden after entering the new route . Regarding how to add a progress bar, because it has already been written in another article, just send the link here, so I won’t repeat the waste. The operation is also relatively simple, you can check it yourself. In fact, when it comes to this, the skeleton screen has been solved incidentally. Generally, the page skeleton screen is a picture of the page skeleton, but it should be noted that this picture should be as small as possible.