Prática de duas maneiras de obter dados em vue + tela de esqueleto simples

Existem duas maneiras de obter dados em vue.A introdução mais importante é: obter após a navegação ser concluída: primeiro conclua a navegação e, em seguida, obtenha os dados no próximo gancho de ciclo de vida do componente. Durante a aquisição de dados, uma indicação como "carregando" é exibida. Obtenha antes de a navegação ser concluída: Antes da navegação ser concluída, obtenha os dados do guarda que entra na rota e execute a navegação após a aquisição de dados com sucesso. Do ponto de vista técnico, os dois métodos são bons - depende da experiência do usuário que você deseja. Então, vamos praticar essas duas maneiras de obter dados, bem como pensar um pouco sobre a otimização da experiência do usuário.
1. Em primeiro lugar, o primeiro: Obter depois de terminada a navegação, este método é o que mais utilizamos (porque só podemos conhecer este método ^{V no} início ). Ao usar este método, iremos imediatamente navegar e renderizar o componente e, em seguida, obter os dados no gancho criado do componente. Isso nos dá a oportunidade de exibir um estado de carregamento durante a aquisição de dados, bem como diferentes estados de carregamento entre diferentes visualizações. Todos sabem como obter dados. Aqui estão algumas coisas sobre a experiência do usuário: Antes de os dados serem obtidos, os componentes da página foram carregados, mas os dados não foram obtidos e renderizados, portanto, no processo, não podemos carregar o componente que exibe os dados na página., Mas deve haver um componente de carregamento ou tela de esqueleto. Quando a aquisição de dados da página falha, pode ser entendido como o timeout da solicitação, o que queremos mostrar é o componente desconectado. Se for uma página de lista, considere o caso de dados vazios, que são um componente de um prompt vazio. Então, nossa página deve ter essas três partes básicas, coloque o código:

     <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>

Neste caso de aquisição de dados, entramos por padrão para exibir o conteúdo da tela de carregamento ou esqueleto e, em seguida, se a aquisição de dados falhar (ou seja, o tempo limite da solicitação ou a rede for desconectada), o componente do erro é carregado e outros componentes estão ocultos. Se a solicitação de dados for bem-sucedida, carregue o componente de conteúdo e oculte outros componentes. Se for uma página de lista, pode haver duas peças de conteúdo no componente de conteúdo, uma lista e um prompt vazio, então, neste momento, também é necessário determinar se deve carregar o conteúdo ou carregar um prompt vazio com base no dados obtidos. Em segundo lugar, o segundo método: Obtenha antes que a navegação seja concluída.Esse método é solicitar dados no gancho beforeRouteEnter da página, e a página de navegação só será acessada depois que os dados forem obtidos com sucesso.

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

1. Todos sabem que isso no gancho beforeRouteEnter ainda não pode ser usado, então, se quisermos atribuir um valor ou chamar um método, só podemos lidar com isso na função de retorno de chamada do método next (). O primeiro parâmetro desta função de retorno de chamada representa isso, ele irá operar depois que o componente for inicializado com sucesso.
2. Acho que muitas vezes nossos métodos api ou axios são montados no protótipo de vue. Como isso não pode ser usado aqui, podemos apenas introduzir api ou nossos axios em componentes de página.
3. As operações de atribuição também podem ser escritas no método de método, mas o método de chamada desse método de atribuição ainda é vm.yourFunction ().
4. Prompts vazios, processamento de desconexão, etc. são iguais ao primeiro método, mas como os dados são obtidos primeiro e depois saltam para carregar o componente, não precisamos exibir a tela de esqueleto ou o componente de carregamento na página esperada. Sim, precisamos ter um prompt de carregamento antes que a página atual entre, ou seja, no momento da página anterior, como a barra de progresso no topo da página. Desta forma, a experiência do usuário é mais amigável, e o usuário não sabe o resultado que a solicitação s é mais lenta e o usuário não responde por um longo tempo. A barra de progresso global na parte superior da página pode ser definida em main.js através de router.beforeEach (to, from, next) {}. Quando o roteamento da página muda, a barra de progresso no topo da página é exibida, e a barra de progresso fica oculta após entrar na nova rota. Em relação a como adicionar uma barra de progresso, pois já foi escrito em outro artigo, é só enviar o link aqui, para não repetir o desperdício. A operação também é relativamente simples, você mesmo pode verificar. Na verdade, quando se trata disso, o esqueleto da tela foi resolvido acidentalmente. Geralmente, a tela do esqueleto da página é uma imagem do esqueleto da página, mas deve-se notar que esta imagem deve ser o menor possível.