Ao usar o projeto de desenvolvimento de página única vue , encontrei um problema muito desagradável: clique em um dado na página da lista para entrar na página de detalhes e pressione o botão Voltar para retornar à página da lista. a experiência do usuário é muito ruim! ! ! Eu verifiquei problemas relacionados e usei <keep-alive> para resolver este problema. O seguinte é minha experiência.
<keep-alive> é um componente interno do vue , que pode manter o estado na memória durante a troca de componentes para evitar a renderização repetida do DOM.
Em primeiro lugar, há o seguinte trecho de código na página App.vue , todos sabemos que é aqui que a página é renderizada
<router-view></router-view> Altere este código para o seguinte:
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view> Podemos ver o julgamento lógico feito por este código, quando o valor do atributo keepAlive do meta atributo da rota é verdadeiro