Vue: Espero que o keep-alive possa aumentar a função de exclusão dinâmica de componentes em cache

Na verdade, antes de responder a esta pergunta uma vez no fórum, você pode usar keep-alive de include ou exclude para fazer.

Para escrever um exemplo simples:
https://jsfiddle.net/jingkaizhao/m5tLg7wt/2/

não é uma cópia de # 6259?

@posva Sim, situação semelhante. Ele está prestes a limpar o cache keep-alive dinamicamente durante o tempo de execução.

@jkzing Muito obrigado, seu método deve ser capaz de completar o cenário que mencionei acima, mas eu ainda tenho um cenário, como uma página de lista, se for alterado da guia, espero que continue ativo e obtenha os dados diretamente da memória, se Depois de modificar um dado, o programa salta para a página de lista, esperando obter novos dados em segundo plano. Embora eu possa obter os novos dados em segundo plano depois que a página for concluída, parece não é elegante o suficiente. Se houver a API acima, eu só preciso alterá-la após a modificação. O keep-alive deste roteador é apagado e os dados devem ser obtidos automaticamente do segundo plano. Não sei se o que eu disse pode fazer você entender. Em suma, espero poder tornar o aplicativo de página única o mesmo que o efeito de várias guias do iframe anterior: http: //www.sucaihuo .com / modals / 16/1653 / demo / Acima, obrigado.

@okjesse Isso também pode ser feito, tudo que você precisa é atualizar include ou exclude para componentes de nível superior; ou, se vuex for usado, coloque include loja vuex .

Resumindo, o Vue fornece uma API básica para fazer isso. Se você quiser usá-lo convenientemente, será necessário encapsulá-lo ligeiramente.

@jkzing entenda, obrigado, agora estou escrevendo uma implementação de keep-alive sozinho, vou tentar seguir seu método

@jkzing , mas mesmo que isso possa ser alcançado, acho melhor ter essa api, a semântica será diferente, o que eu quero é limpar os dados que foram mantidos vivos, o próprio componente ainda está vivo, ao invés do que sem parar Se o interruptor estará ativo

Este é apenas um dos problemas. A abertura constante de novas páginas que encontramos causará muita memória e, finalmente, o navegador travará. Isso não deve ter nada a ver com o keepalive.Se pudermos ,

O que queremos alcançar é decidir se vamos usar a página em cache ou uma nova página antes de pular para a página.A velha api não consegue fazer isso

Eu também encontrei esse requisito. Em seguida, cliquei na lista de menu para conectar, adicionei um rótulo nas guias e armazenei em cache o componente recém-aberto; cliquei no rótulo de fechamento, espero excluir o componente em cache; chamei isso. $ In a função de gancho desativada do componente. destroy (); Isso pode limpar o cache, mas foi descoberto que o novo componente não será armazenado em cache quando a conexão for aberta na próxima vez

@fadexiii Resolvi o método existente, que pode ser alcançado configurando dinamicamente inclui

@okjesse Meu keep-alive contém <router-view></router-view> O método includes não funciona

@okjesse Ainda não defini o atributo name de conponent. Após a definição, está tudo bem, obrigado

FYI: implementado em 2cba6d4cb1db8273ee45cccb8e50ebd87191244e

@fadexiii # 6961 As mesmas necessidades que você, como você as resolve?

@ Jack-93 Use keep-alive include, quando uma nova tag é aberta, o nome do componente atual é adicionado ao array include e o nome do componente da tag de fechamento é deletado do array quando a tag é fechada.

Vendo o método de $ destroy, acho que este é o uso correto, que determina se o componente deve ser armazenado em cache ao sair da página por meio de diferentes comportamentos do usuário no componente.
(Por exemplo, um componente de mensagem, este componente deve ser destruído após a mensagem ser enviada com sucesso. Se não for enviada, o cache deve ser mantido para o usuário entrar e continuar na próxima vez.)
No entanto, após a destruição, repetir o acesso a este componente novamente produzirá resultados estranhos, e o componente não pode mais ser armazenado em cache.Eu acho que isso é um bug.

@wanyaxing Também encontrei um problema semelhante a você. Usei o keep-alive para armazenar em cache todos os subcomponentes. Página de lista A --- "Página de detalhes B ---" Página de três níveis D. Ao avançar, as rotas são armazenadas em sessionStorage. Ao retornar, é avaliado se a próxima rota está em sessionStorage. Nesse caso, a instância atual será destruída.
Neste caso, não há problema pela primeira vez e pode ser executado normalmente. Depois de duas ou mais vezes, B será armazenado em cache várias vezes. Cada vez que ele retornar de D para B, um novo B será gerado e o B previamente armazenado em cache ainda está na memória, conforme mostrado na figura:

O código principal é o seguinte:

@ realfly08 Tentei enviar um PR para resolver este problema, mas parece que o envio -https :

Eu também estava me preparando para o cache de todo o site antes, e então encontrei o poço lógico de atualização do cache.
Agora desisti de todo o cache do site, apenas ativei o cache nas páginas principais do formulário e, em seguida, julguei dinamicamente no código se devo reter os dados da página atual, o que é um pulo temporário desses problemas, mas ainda sinto que isso a lógica não é boa o suficiente.

@wanyaxing Também encontrei um problema semelhante. A função lógica a ser implementada é as páginas A-> B-> C 3. O cache é usado ao retornar e é renderizado novamente ao entrar novamente. Atualmente, cada página é mantida ativa , e então eu faço um julgamento na página B. Se for para retornar à página anterior (vá -1), destrua o componente atual em desativado e chame $ destroy. Quando você entrar na página C novamente na ordem, retorne à página B , você pode ver que é uma página B recriada, há uma página B no cache ao mesmo tempo

https://www.jianshu.com/p/cd1baf5b03b0
Eu compilei isso

@fadexiii keep-alive como usar com o modo de exibição de roteador?

  <keep-alive :include="includes">
     <router-view></router-view>
  </keep-alive>

inclui escreve o nome na configuração de roteamento: 'login'

const router = new Router({
  routes: [
    {
      path: '/login',
      name: 'login',
      component: Login
    }]
 })

Por que atribuo inclusões a uma string vazia e ela ainda pode ser armazenada em cache?Meu requisito é destruir manualmente a rota em cache

Depois que o componente é destruído, o cache não é esvaziado.Acho que o problema está aqui.
O responsável pelo projeto recomenda o uso de atributos como incluir para processamento. Não acho que seja destruído diretamente. A memória pode ser melhorada.

@wanyaxing leia o PR que você enviou, ele deve ser válido, ou abra uma API de remoção de cache, certo?

@ leixu2txtek Desisti desse PR. Ao limpar o cache à força, percebi a função de excluir dinamicamente o componente do cache disfarçado.

Atualmente, uso o cache em todo o site e implemento a função de exclusão do cache com base na lógica de negócios, interceptando o evento de roteamento da saída da página. Os seguintes snippets de código são para referência:

• Coloque a visualização do roteador no keep-alive e todo o site usará o cache por padrão.
  <keep-alive><router-view class="transit-view"></router-view></keep-alive>
• Eu coloquei em camadas todas as páginas nas rotas. Por exemplo, meta.rank representa o nível da página, como 1,5> 2,5> 3,5 significa entrar na segunda camada da primeira camada para a terceira camada.

routes: [
{   path: '/', redirect:'/yingshou', },
{   path: '/yingshou',                meta:{rank:1.5,isShowFooter:true},          },
{   path: '/contract_list',           meta:{rank:1.5,isShowFooter:true},          },
{   path: '/customer',                meta:{rank:1.5,isShowFooter:true},          },
{   path: '/wode',                    meta:{rank:1.5,isShowFooter:true},          },
{   path: '/yingfu',                  meta:{rank:1.5,isShowFooter:true},          },
{   path: '/yingfu/pact_list',        meta:{rank:2.5},                            },
{   path: '/yingfu/pact_detail',      meta:{rank:3.5},                            },
{   path: '/yingfu/expend_view',      meta:{rank:4.5},                            },
{   path: '/yingfu/jizhichu',         meta:{rank:5.5},                            },
{   path: '/yingfu/select_pact',      meta:{rank:6.5},                            },
{   path: '/yingfu/jiyingfu',         meta:{rank:7.5},                            },
]

• Como todas as páginas são armazenadas em cache, a ideia central é [Quando o cache será destruído? ] Meu projeto é: o cache da página atual será mantido ao mudar para a próxima página no mesmo nível, e [o cache da página atual será destruído ao retornar à página anterior].
• Portanto, em main.js, usei o método Vue.mixin para interceptar o evento de saída de rota e implementei a função de destruir o cache de página no método de interceptação. O código principal é o seguinte:

Vue.mixin({
    beforeRouteLeave:function(to, from, next){
        if (from && from.meta.rank && to.meta.rank && from.meta.rank>to.meta.rank)
        {//如果返回上一层，则摧毁本层缓存。
            if (this.$vnode && this.$vnode.data.keepAlive)
            {
                if (this.$vnode.parent && this.$vnode.parent.componentInstance && this.$vnode.parent.componentInstance.cache)
                {
                    if (this.$vnode.componentOptions)
                    {
                        var key = this.$vnode.key == null
                                    ? this.$vnode.componentOptions.Ctor.cid + (this.$vnode.componentOptions.tag ? `::${this.$vnode.componentOptions.tag}` : '')
                                    : this.$vnode.key;
                        var cache = this.$vnode.parent.componentInstance.cache;
                        var keys  = this.$vnode.parent.componentInstance.keys;
                        if (cache[key])
                        {
                            if (keys.length) {
                                var index = keys.indexOf(key);
                                if (index > -1) {
                                    keys.splice(index, 1);
                                }
                            }
                            delete cache[key];
                        }
                    }
                }
            }
            this.$destroy();
        }
        next();
    },
});

Resumo: Na verdade, por meio do componente keepAlive de nível superior onde o componente de página está localizado, a lista de cache no objeto é violentamente manipulada. . .

Simples e direto, embora não muito elegante, é fácil de usar, haha ​​:)

Claro, ainda espero que a API de suporte oficial saia melhor.

@wanyaxing eu controlo o cache da página através do roteamento

Por exemplo, eu tenho / executei / e sua rota filha / executado / gráfico /. Eu também uso o método mixin para hackear e destruir componentes que não precisam ser armazenados em cache quando a rota sai. O que eu quero fazer é rotear de o pai para o subconjunto. O pai é armazenado em cache e outras condições são destruídas, portanto, só precisamos controlar o roteamento, sem adicionar nenhum atributo, sou preguiçoso;

// 支持页面保持
Vue.mixin({
  beforeRouteLeave(to, from, next) {

    if (!to.path.startsWith(from.path)) this.$destroy();

    next();

  }
});

Obrigado @wanyaxing , seu código é muito útil para mim. Deixe-me referir a

Descobri que o cache não foi destruído.Faça o seu melhor para se comunicar com @LinusBorg

@wanyaxing Tenho procurado uma maneira de obter o cache, não estou familiarizado com o código principal do vue, seu código é mais útil, passei no teste, muito bom, faça isso temporariamente, espero que o oficial possa resolver esse problema, Perguntei se poucas pessoas verificaram muitas informações e há problemas deste ou daquele tipo

Ha ha.
Com base nisso, @ leixu2txtek recomenda um plug-in, combinado com https://github.com/wanyaxing/vue-router- então , o efeito é melhor.
Use vue-router-then para abrir uma subpágina na página atual e você poderá obter as informações ou eventos da subpágina na página atual.
this.$routerThen.push('/chose').then(vm => {})

Para dar um exemplo mais comumente usado, por exemplo, ao preencher a página do pedido, você precisa abrir a lista de endereços para seleção.

<input v-model="price" v-model-link="'/select_address'" />

Então, na rota aberta por / select_address, após selecionar o endereço, acione um evento de entrada e volte para a página.

<script>
methods:{
    clickSomeOne:function(value){
        this.$emit('input',value);
        this.$router.go(-1);
    },
}
</script>

Isso requer a interação direta entre o roteamento pai e filho com base na estratégia de cache mencionada acima. No entanto, será muito interessante após a implementação. A ideia de desenvolvimento é muito intuitiva. Você não precisa considerar o armazenamento de dados temporários em vuex , basta abrir a página para obter os dados.

@fadexiii Quer dizer que, se estiver usando um roteador, o include deve incluir o nome no componente correspondente ao roteador?
---- router.js ----

import ComponentA from 'views/a
export default [
  {path: 'a', component: ComponentA, name: a}
]

---- views / a.vue ----

export default {
  name: 'xxxa'
}

O que deve ser armazenado em include is ComponentA ou a ou xxxa?

@yiwuyu xxxa

@jkzing E se eu carregar o mesmo componente duas vezes, um precisa ser armazenado em cache e o outro não? Seus nomes de componentes são os mesmos.

Eu também encontrei esse problema. Adicione
meta: {
keepAlive: true // precisa ser armazenado em cache
}
Definido como falso ao clicar em fechar
Em seguida, mude o ouvinte para verdadeiro
Veja https://mp.csdn.net/postedit/82628953 para mais detalhes. Agora o teste não é problema. Não sei se haverá problemas depois.

Quando a guia é alternada, o cache é fechado e destruído e, na próxima vez que for aberto e recarregado com várias páginas de sub-roteamento aninhadas, o mesmo é verdadeiro.

Na verdade, antes de responder a esta pergunta uma vez no fórum, você pode usar keep-alive de include ou exclude para fazer.

Para escrever um exemplo simples:
https://jsfiddle.net/jingkaizhao/m5tLg7wt/2/

Eu entendo este exemplo. Quero perguntar aos deuses aqui. Meu negócio é assim. O lado esquerdo é uma guia vertical. Essa guia pode ser adicionada ou excluída dinamicamente pelo usuário. Clique em qualquer uma das guias e o lado direito exibe aquela que corresponde a Esta aba. Uma árvore é na verdade a mesma árvore, mas os nós selecionados pela árvore são diferentes. A ideia inicial é adicionar um item de guia, adicionar uma árvore no lado direito, ao alternar entre as guias, a árvore ficará oculta e exibida de acordo (v-show), mas quando houver mais guias, haverá muitas árvores no lado direito, e os nós dom são muitos. Se você não precisar ocultar a exibição e usar v-if, haverá estados de árvore (selecionado, expandido, rolado) que não podem ser salvos, então pensei mais tarde de manter vivo, que pode salvar o estado. Mas eu sou um componente de arquivo único do vue. As guias estão na página principal. A árvore é um componente que é importado. Depois que a importação chega, ela é registrada diretamente na propriedade de componentes. Como posso criar vários nomes para a árvore como você postou? Mas, na verdade, sou apenas um componente. Criei o nome apenas para associar à guia à esquerda. Mais precisamente, para excluir um item da guia do lado esquerdo, exclua também o buffer de árvore correspondente a este item da guia em keepalive? Mas o que devemos fazer?

@ leixu2txtek Desisti desse PR. Ao limpar o cache à força, percebi a função de excluir dinamicamente o componente do cache disfarçado.

Atualmente, uso o cache em todo o site e implemento a função de exclusão do cache com base na lógica de negócios, interceptando o evento de roteamento da saída da página. Os seguintes snippets de código são para referência:

• Coloque a visualização do roteador no keep-alive e todo o site usará o cache por padrão.
  <keep-alive><router-view class="transit-view"></router-view></keep-alive>
• Eu coloquei em camadas todas as páginas nas rotas. Por exemplo, meta.rank representa o nível da página, como 1,5> 2,5> 3,5 significa entrar na segunda camada da primeira camada para a terceira camada.

routes: [
{   path: '/', redirect:'/yingshou', },
{   path: '/yingshou',                meta:{rank:1.5,isShowFooter:true},          },
{   path: '/contract_list',           meta:{rank:1.5,isShowFooter:true},          },
{   path: '/customer',                meta:{rank:1.5,isShowFooter:true},          },
{   path: '/wode',                    meta:{rank:1.5,isShowFooter:true},          },
{   path: '/yingfu',                  meta:{rank:1.5,isShowFooter:true},          },
{   path: '/yingfu/pact_list',        meta:{rank:2.5},                            },
{   path: '/yingfu/pact_detail',      meta:{rank:3.5},                            },
{   path: '/yingfu/expend_view',      meta:{rank:4.5},                            },
{   path: '/yingfu/jizhichu',         meta:{rank:5.5},                            },
{   path: '/yingfu/select_pact',      meta:{rank:6.5},                            },
{   path: '/yingfu/jiyingfu',         meta:{rank:7.5},                            },
]

• Como todas as páginas são armazenadas em cache, a ideia central é [Quando o cache será destruído? ] Meu projeto é: o cache da página atual será mantido ao mudar para a próxima página no mesmo nível, e [o cache da página atual será destruído ao retornar à página anterior].
• Portanto, em main.js, usei o método Vue.mixin para interceptar o evento de saída de rota e implementei a função de destruir o cache de página no método de interceptação. O código principal é o seguinte:

Vue.mixin({
    beforeRouteLeave:function(to, from, next){
        if (from && from.meta.rank && to.meta.rank && from.meta.rank>to.meta.rank)
        {//如果返回上一层，则摧毁本层缓存。
            if (this.$vnode && this.$vnode.data.keepAlive)
            {
                if (this.$vnode.parent && this.$vnode.parent.componentInstance && this.$vnode.parent.componentInstance.cache)
                {
                    if (this.$vnode.componentOptions)
                    {
                        var key = this.$vnode.key == null
                                    ? this.$vnode.componentOptions.Ctor.cid + (this.$vnode.componentOptions.tag ? `::${this.$vnode.componentOptions.tag}` : '')
                                    : this.$vnode.key;
                        var cache = this.$vnode.parent.componentInstance.cache;
                        var keys  = this.$vnode.parent.componentInstance.keys;
                        if (cache[key])
                        {
                            if (keys.length) {
                                var index = keys.indexOf(key);
                                if (index > -1) {
                                    keys.splice(index, 1);
                                }
                            }
                            delete cache[key];
                        }
                    }
                }
            }
            this.$destroy();
        }
        next();
    },
});

Resumo: Na verdade, por meio do componente keepAlive de nível superior onde o componente de página está localizado, a lista de cache no objeto é violentamente manipulada. . .

Simples e direto, embora não muito elegante, é fácil de usar, haha ​​:)

Claro, ainda espero que a API de suporte oficial saia melhor.

Mas desta forma a memória não será liberada. Eu desligo o Keepalive e ele vai ficar bem. Adicionar o Keepalive e então remover manualmente o cache e destruir a memória ainda está aumentando. Eu me pergunto se você prestou atenção a este aspecto?

@Liudapeng Eu não estudei o uso da memória cuidadosamente

Estou um pouco ocupado ultimamente. Vi sua mensagem há dois dias e não tive tempo de responder.

Acabei de fazer outro teste, repetido várias vezes para me aprofundar nos cinco ou seis níveis da página e depois voltar para a página inicial. Os resultados da linha do tempo de memória são os seguintes:

• Ative o keep-alive e destrua dinamicamente o componente (ou seja, use o método que mencionei acima):
  > Você pode ver claramente a queda de memória na linha do tempo. Acho que a memória está destruída.
  

Não use o keep-alive:

Como não há keepalive, a pilha de memória não será muito rápida, mas ainda está ficando cada vez mais alta (talvez meu código seja alterado com pressa e haja vazamentos de memória em outro lugar)

Mas, em geral, acho que depois de usar a destruição dinâmica, o uso de memória ainda está dentro da faixa aceitável, então se você tiver um aumento significativo na memória, você deve verificar se o evento de ligação não é destruído quando o componente é destruído (causando Embora o componente é removido da matriz de cache de keepAlive, não é destruído da memória).

Por favor cheque novamente.

@wanyaxing, tenho o mesmo problema no meu projeto, sem keep-alive ：

Chamar $ destory () do componente dinâmico não funciona, e acho que os montes de JS aumentam com o número de nós. Parece que o componente dinâmico criou DOMs sem destruí-los.

@bigggge name é o atributo dentro do componente, não o atributo da rota

Minha pergunta é ainda mais bizarra. Minha versão vue é 2.3.3. A página A tem um código para rolar para carregar a próxima página. Eu mudei da página A para a página B. Quando a página B foi rolada, descobri que o código da página A para carregar a próxima página ainda ser executado. Quando eu removo o keep-alive global, o problema acima não ocorrerá. Mas todos os meus ativados são inválidos novamente, tenho que usar o criado.

Minha pergunta é ainda mais bizarra. Minha versão vue é 2.3.3. A página A tem um código para rolar para carregar a próxima página. Eu mudei da página A para a página B. Quando a página B foi rolada, descobri que o código da página A para carregar a próxima página ainda ser executado. Quando eu removo o keep-alive global, o problema acima não ocorrerá. Mas todos os meus ativados são inválidos novamente, tenho que usar o criado.

Pode ser causado pelo monitoramento global, você pode julgar se é a rota atual ao rolar e, em seguida, decidir se deseja carregar a próxima página

Minha pergunta é ainda mais bizarra. Minha versão vue é 2.3.3. A página A tem um código para rolar para carregar a próxima página. Eu mudei da página A para a página B. Quando a página B foi rolada, descobri que o código da página A para carregar a próxima página ainda ser executado. Quando eu removo o keep-alive global, o problema acima não ocorrerá. Mas todos os meus ativados são inválidos novamente, tenho que usar o criado.

Pode ser causado pelo monitoramento global, você pode julgar se é a rota atual ao rolar e, em seguida, decidir se deseja carregar a próxima página

Sim, eu uso o plug-in vue-infinite-scroll. Quando eu uso o keep-alive global, ele não remove o evento de monitoramento. Reescrevi este plug-in.

Usei o script de
https://gist.github.com/lingceng/c204bac2704d03db99932d5457e662e6

@jkzing E se eu carregar o mesmo componente duas vezes, um precisa ser armazenado em cache e o outro não? Seus nomes de componentes são os mesmos.

Também tenho esta pergunta. Incluir não pode atender a este requisito. Se várias páginas de roteamento corresponderem a um componente, haverá apenas um nome de componente. O que devo fazer?

Quando a guia é alternada, o cache é fechado e destruído e, na próxima vez que for aberto e recarregado com várias páginas de sub-roteamento aninhadas, o mesmo é verdadeiro.

@ heng1234Olá, você resolveu este problema? Quem pode deixar uma informação de contato para orientação?

Não troque de página roteando e troque por componentes
https://blog.csdn.net/qq_39313596/article/details/82628953

[email protected]

De: Codezero123
Hora de envio: 03-12-2019 10:04
Destinatário: vuejs / vue
Cc: hlvy; Menção
Assunto: Re: [vuejs / vue] Espero que o keep-alive possa aumentar a função de exclusão dinâmica de componentes em cache (# 6509)
Quando a guia é alternada, o cache é fechado e destruído e, na próxima vez que for aberto e recarregado com várias páginas de sub-roteamento aninhadas, o mesmo é verdadeiro.
@ heng1234Olá, você resolveu este
Você está recebendo isso porque foi mencionado.
Responda a este e-mail diretamente, visualize-o no GitHub ou cancele a inscrição.

@wanyaxing você não é eficaz para o cache de roteamento de três níveis. Por exemplo, no vue-element-admin, quando várias tags de tag de três níveis estão habilitadas, trocar a tag de tag não destruirá o componente do cache, mas apenas abrirá um terço tag tag de roteamento de nível., Pode ser destruída. Por exemplo, ative os seguintes menu1-0 e menu1-1.
roteamento.
{ path: '/nested', component: Layout, redirect: '/nested/menu1/menu1-1', name: 'Nested', meta: { title: 'Nested Routes', icon: 'nested' }, children: [ { path: 'menu1', component: () => import('@/views/nested/menu1/index'), // Parent router-view name: 'Menu1', meta: { title: 'Menu 1' }, redirect: '/nested/menu1/menu1-1', children: [ { path: 'menu1-0', component: () => import('@/views/nested/menu1/menu1-0'), name: 'Menu1-0', meta: { title: 'Menu 1-0', noCache: true } }, { path: 'menu1-1', component: () => import('@/views/nested/menu1/menu1-1'), name: 'Menu1-1', meta: { title: 'Menu 1-1' } }, { path: 'menu1-2', component: () => import('@/views/nested/menu1/menu1-2'), name: 'Menu1-2', redirect: '/nested/menu1/menu1-2/menu1-2-1', meta: { title: 'Menu 1-2' }, children: [ { path: 'menu1-2-1', component: () => import('@/views/nested/menu1/menu1-2/menu1-2-1'), name: 'Menu1-2-1', meta: { title: 'Menu 1-2-1' } }, { path: 'menu1-2-2', component: () => import('@/views/nested/menu1/menu1-2/menu1-2-2'), name: 'Menu1-2-2', meta: { title: 'Menu 1-2-2' } } ] }, { path: 'menu1-3', component: () => import('@/views/nested/menu1/menu1-3'), name: 'Menu1-3', meta: { title: 'Menu 1-3' } } ] } ] }

`Vue.mixin ({
beforeR outeLeave: function (to, from, next) {
if (from.meta.noCache) {
if (this. $ vnode && this. $ vnode.data.keepAlive) {
if (this. $ vnode.parent && this. $ vnode.parent.componentInstance && this. $ vnode.parent.componentInstance.cache) {

      if (this.$vnode.componentOptions) {
        var key = this.$vnode.key == null
          ? this.$vnode.componentOptions.Ctor.cid + (this.$vnode.componentOptions.tag ? `::${this.$vnode.componentOptions.tag}` : '')
          : this.$vnode.key;
        var cache = this.$vnode.parent.componentInstance.cache;
        var keys = this.$vnode.parent.componentInstance.keys;
        if (cache[key]) {
          if (keys.length) {
            var index = keys.indexOf(key);
            if (index > -1) {
              keys.splice(index, 1);
            }
          }
          delete cache[key];
        }
      }
    }
    this.$destroy();
  }
}
next();

},
}); `

A ideia é esse tipo de ideia.Não há problema com a ideia.Quando chamar e destruir o cache, depende da implementação específica em seu negócio.

Esse tipo de cenário em nosso lado comercial deve ser muito cenário:
1. Eu naveguei por várias páginas e preciso ser armazenado em cache
2. Clique para sair, você precisa limpar todo o cache
3. Existem outras solicitações de redirecionamento de erro após o login; essas páginas não são armazenadas em cache
4. O login é bem-sucedido e a nova página continua a ser armazenada em cache

Agora descobri que era impossível limpar todos os caches quando atingiu 2. Colocar o valor máximo de keep-alive em vuex e defini-lo como 1 ainda é inválido, dependendo das ferramentas do desenvolvedor vue, ainda há páginas em cache.
O que é ainda mais estranho para mim é que pular para outras páginas sem login em 3 acionará a montagem da página em cache em 1 e, olhando para as ferramentas do desenvolvedor, essas páginas estão todas inativas. Ei, isso leva a uma lógica de página diferente. Tipo do problema.
Depois de muito tempo procurando, ainda não sei porque

Esse tipo de cenário em nosso lado comercial deve ser muito cenário:
1. Eu naveguei por várias páginas e preciso ser armazenado em cache
2. Clique para sair, você precisa limpar todo o cache
3. Existem outras solicitações de redirecionamento de erro após o login; essas páginas não são armazenadas em cache
4. O login é bem-sucedido e a nova página continua a ser armazenada em cache

Agora descobri que era impossível limpar todos os caches quando atingiu 2. Colocar o valor máximo de keep-alive em vuex e defini-lo como 1 ainda é inválido, dependendo das ferramentas do desenvolvedor vue, ainda há páginas em cache.
O que é ainda mais estranho para mim é que pular para outras páginas sem login em 3 acionará a montagem da página em cache em 1 e, olhando para as ferramentas do desenvolvedor, essas páginas estão todas inativas. Ei, isso leva a uma lógica de página diferente. Tipo do problema.
Depois de muito tempo procurando, ainda não sei porque

Em seu cenário, no momento de 2, você deve considerar atualizar a página diretamente, que é a solução mais segura e direta.

Como includes corresponde ao nome do componente, e se várias rotas corresponderem a um componente? Existe alguma maneira de dar ao mesmo componente um nome diferente?