Vue: Espero que keep-alive pueda aumentar la función de eliminar dinámicamente componentes en caché

De hecho, antes de responder esta pregunta una vez en el foro, puedes usar keep-alive de include o exclude para hacer.

Para escribirte un ejemplo simple:
https://jsfiddle.net/jingkaizhao/m5tLg7wt/2/

¿No es esto un duplicado de # 6259?

@posva Sí, situación similar. Está a punto de borrar dinámicamente la caché keep-alive durante el tiempo de ejecución.

@jkzing Muchas gracias, su método debería poder completar el escenario que mencioné anteriormente, pero todavía tengo un escenario, como una página de lista, si se cambia de pestaña, espero que se mantenga vivo y obtenga los datos directamente de la memoria, si Después de modificar un dato, el programa salta a la página de la lista, con la esperanza de obtener nuevos datos en segundo plano. Aunque puedo obtener los nuevos datos en segundo plano después de completar la página, parece no es lo suficientemente elegante. Si existe la api anterior, solo necesito cambiarla después de la modificación. El mantenimiento de este enrutador se borra y los datos deben obtenerse automáticamente del fondo. No sé si lo que dije puede hacerle entender. En resumen, espero poder hacer que la aplicación de una sola página sea elegante, igual que el efecto de múltiples pestañas del iframe anterior: http: //www.sucaihuo .com / modals / 16/1653 / demo / Arriba, gracias.

@okjesse Esto también se puede hacer, todo lo que necesita es actualizar include o exclude a componentes de nivel superior; o, si se usa vuex, poner include tienda vuex .

En resumen, Vue proporciona una API básica para lograr esto. Si desea usarla convenientemente, debe encapsularla ligeramente.

@jkzing entiende, gracias, ahora estoy escribiendo una implementación para mantener vivo por mí mismo, intentaré seguir tu método

@jkzing , pero incluso si esto se puede lograr, creo que es mejor tener esta api, la semántica será diferente, lo que quiero es borrar los datos que se han mantenido vivos, el componente en sí sigue vivo, en lugar de que sin parar si el interruptor estará vivo

Este es solo uno de los problemas, la apertura constante de nuevas páginas que nos encontremos causará demasiada memoria y finalmente el navegador se congelará, no debería tener nada que ver con keepalive.Si podemos ,

Lo que queremos lograr es decidir si usar la página almacenada en caché o una nueva página justo antes de saltar a la página.La vieja api no puede hacerlo

También encontré este requisito. Luego hice clic en la lista del menú para conectarme, agregué una etiqueta en las pestañas y guardé en caché el componente recién abierto; hice clic en la etiqueta de cierre, espero eliminar el componente en caché; llamé a esto. $ In la función de gancho desactivada del componente. destroy (); Esto puede borrar la caché, pero se encuentra que el nuevo componente no se almacenará en caché cuando se abra la conexión la próxima vez

@fadexiii Resolví el método existente, que se puede lograr configurando dinámicamente incluye

@okjesse My keep-alive contiene un <router-view></router-view> El método incluye no funciona

@okjesse Hace un momento no definí el atributo de nombre del componente. Después de la definición, está bien, gracias

FYI: implementado en 2cba6d4cb1db8273ee45cccb8e50ebd87191244e

@fadexiii # 6961 Las mismas necesidades que tú, ¿cómo las resuelves?

@ Jack-93 Use keep-alive include, cuando se abre una nueva etiqueta, el nombre del componente actual se agrega a la matriz de inclusión y el nombre de componente de la etiqueta de cierre se elimina de la matriz cuando se cierra la etiqueta.

Al ver el método de $ destroy, creo que este es el uso correcto, que determina si se almacena en caché el componente al salir de la página a través de diferentes comportamientos de usuario en el componente.
(Por ejemplo, un componente de mensaje, este componente debe destruirse después de que el mensaje se envía correctamente. Si no se envía, la caché debe mantenerse para que el usuario entre y continúe la próxima vez).
Sin embargo, después de destruirlo, repetir el acceso a este componente de nuevo producirá resultados extraños y el componente ya no podrá almacenarse en caché. Creo que esto es un error.

@wanyaxing También encontré un problema similar al tuyo.
En este caso, no hay ningún problema por primera vez y puede ejecutarse normalmente. Después de dos o más veces, B se almacenará en caché varias veces. Cada vez que regrese de D a B, se generará una nueva B, y la B previamente almacenado en caché todavía está en la memoria, como se muestra en la figura:

El código central es el siguiente:

@ realfly08 Traté de enviar un PR para resolver este problema, pero parece que el envío falló. No descubrí cómo pasar la revisión automática del código de vue. -https :

También me estaba preparando para el caché de todo el sitio antes, y luego encontré el pozo lógico de la actualización del caché.
Ahora renuncié a todo el caché del sitio, solo encendí el caché en las páginas de formulario clave y luego juzgué dinámicamente en el código si debía retener los datos de la página actual, lo cual es un salto temporal de estos problemas, pero todavía siento que esto la lógica no es lo suficientemente buena.

@wanyaxing También encontré un problema similar. La función lógica a implementar es A-> B-> C 3 páginas. El caché se usa al regresar y se vuelve a renderizar al ingresar nuevamente. Actualmente, cada página se mantiene viva , y luego hago un juicio en la página B. Si va a regresar a la página anterior (vaya a -1), destruya el componente actual en desactivado y llame a $ destroy. Cuando ingrese a la página C nuevamente en orden, regrese a la página B , puede ver que se recrea la página B, hay una página B en el caché al mismo tiempo

https://www.jianshu.com/p/cd1baf5b03b0
Compilé esto

@fadexiii keep-alive ¿cómo usarlo con router-view?

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

incluye escribe el nombre en la configuración de enrutamiento: 'inicio de sesión'

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

¿Por qué asigno inclusiones a una cadena vacía y aún se puede almacenar en caché?Mi requisito es destruir manualmente la ruta en caché

Después de que se destruye el componente, la caché no se vacía Creo que el problema está aquí.
La persona a cargo del proyecto recomienda el uso de atributos como incluir para el procesamiento. No creo que se destruya directamente. La memoria se puede mejorar.

@wanyaxing lea el PR que envió, debería ser válido, o abra una API de eliminación de caché, ¿verdad?

@ leixu2txtek He renunciado a ese PR. Al borrar a la fuerza el caché, me he dado cuenta de la función de eliminar dinámicamente el componente del caché disfrazado.

Actualmente utilizo el almacenamiento en caché en todo el sitio e implemento la función de eliminar el caché en función de la lógica empresarial al interceptar el evento de enrutamiento de la página que sale. Los siguientes fragmentos de código son de referencia:

• Ponga la vista del enrutador en el modo de mantener vivo, y todo el sitio usará el caché de forma predeterminada.
  <keep-alive><router-view class="transit-view"></router-view></keep-alive>
• Coloqué en capas todas las páginas de las rutas. Por ejemplo, meta.rank representa el nivel de la página, como 1.5> 2.5> 3.5 significa ingresar a la segunda capa desde la primera capa a la tercera capa.

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},                            },
]

• Debido a que todas las páginas se almacenan en caché, la idea central es [¿Cuándo se destruirá la caché? ]. Mi diseño es: el caché de la página actual se mantendrá cuando se cambie a la página siguiente en el mismo nivel, y [el caché de la página actual se destruirá cuando regrese a la página anterior].
• Entonces, en main.js, utilicé el método Vue.mixin para interceptar el evento de salida de ruta e implementé la función de destruir el caché de la página en el método de intercepción. El código central es el siguiente:

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();
    },
});

Resumen: De hecho, a través del componente keepAlive de nivel superior donde se encuentra el componente de página, la lista de caché en el objeto se manipula violentamente. . .

Sencillo y sencillo, aunque no muy elegante, es fácil de usar, jaja :)

Por supuesto, todavía espero que la API de soporte oficial salga mejor.

@wanyaxing Yo controlo el almacenamiento en caché de la página a través del enrutamiento

Por ejemplo, tengo / ejecutado / y su ruta secundaria / ejecutada / gráfico /. También utilizo el método mixin para piratear y destruir componentes que no necesitan ser almacenados en caché cuando la ruta sale. Lo que quiero hacer es enrutar desde el padre al subconjunto El padre se almacena en caché y otras condiciones se destruyen, por lo que solo necesitamos controlar el enrutamiento, sin agregar ningún atributo, soy vago;

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

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

    next();

  }
});

Gracias @wanyaxing , tu código es muy útil para mí. Déjame referirme a

Descubrí que el caché no fue destruido.Haz tu mejor esfuerzo para comunicarte con

@wanyaxing He estado buscando una manera de obtener el caché, no estoy familiarizado con el código central de vue, su código es más útil, pasé la prueba, muy bien, haga esto temporalmente, espero que el funcionario pueda resolver este problema, Pregunté si Pocas personas habían verificado mucha información y hay problemas de este o aquel tipo.

Jaja.
Sobre esta base, @ leixu2txtek le recomienda un complemento, combinado con https://github.com/wanyaxing/vue-router-then , el efecto es mejor.
Utilice vue-router-then para abrir una subpágina en la página actual y podrá obtener la información o los eventos de la subpágina en la página actual.
this.$routerThen.push('/chose').then(vm => {})

Para dar un ejemplo de uso más común, por ejemplo, al completar la página de pedido, debe abrir la lista de direcciones para la selección.

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

Luego, en la ruta abierta por / select_address, después de seleccionar la dirección, active un evento de entrada y vuelva a la página.

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

Esto requiere la interacción directa entre el enrutamiento principal y secundario según la estrategia de almacenamiento en caché mencionada anteriormente. Sin embargo, será muy interesante después de la implementación. La idea de desarrollo es muy intuitiva. No es necesario que consideres almacenar datos temporales en vuex , simplemente abra la página para obtener los datos.

@fadexiii ¿Quiere decir que si está utilizando un enrutador, debe incluir el nombre en el componente correspondiente al enrutador?
---- router.js ----

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

---- vistas / a.vue ----

export default {
  name: 'xxxa'
}

¿Qué se debe almacenar en include is ComponentA o a o xxxa?

@yiwuyu xxxa

@jkzing ¿Qué

También encontré este problema. Agregar
meta: {
keepAlive: true // necesita ser almacenado en caché
}
Establecer en falso al hacer clic en cerrar
Luego cambia el oyente a verdadero
Consulte https://mp.csdn.net/postedit/82628953 para obtener más detalles. Ahora la prueba no es un problema. No sé si habrá problemas más adelante.

Cuando se cambia la pestaña, la caché se cierra y la caché se destruye y la próxima vez que se abre y se vuelve a cargar con varias páginas de subenrutamiento anidadas, lo mismo ocurre.

De hecho, antes de responder esta pregunta una vez en el foro, puedes usar keep-alive de include o exclude para hacer.

Para escribirte un ejemplo simple:
https://jsfiddle.net/jingkaizhao/m5tLg7wt/2/

Entiendo este ejemplo. Quiero preguntarles a los dioses aquí. Mi negocio es así. El lado izquierdo es una pestaña vertical. El usuario puede agregar o eliminar esta pestaña dinámicamente. Haga clic en cualquiera de las pestañas y el lado derecho muestra la correspondiente a Esta pestaña Un árbol es en realidad el mismo árbol, pero los nodos seleccionados por el árbol son diferentes. La idea inicial es agregar un elemento de pestaña, agregar un árbol en el lado derecho, al cambiar de pestaña, el árbol se ocultará y se mostrará en consecuencia (v-show), pero cuando haya más pestañas, habrá muchos árboles en el lado derecho, y los nodos dom son demasiados. Si no necesita ocultar la pantalla y usar v-if, habrá estados de árbol (seleccionados, expandidos, desplazados) que no se pueden guardar, así que luego pensé de mantener vivo, que puede salvar al estado. Pero soy un componente de un solo archivo de vue. Las pestañas están en la página principal. El árbol es un componente que se importa. Después de que entra la importación, se registra directamente en la propiedad de los componentes. ¿Cómo puedo crear varios nombres para el árbol como lo publicaste? Pero, de hecho, soy solo un componente. Creé el nombre solo para asociarlo con la pestaña izquierda. Más precisamente, para eliminar un elemento de pestaña en el lado izquierdo, ¿eliminar también el búfer de árbol correspondiente a este elemento de pestaña en keepalive? Pero, ¿qué debemos hacer?

@ leixu2txtek He renunciado a ese PR. Al borrar a la fuerza el caché, me he dado cuenta de la función de eliminar dinámicamente el componente del caché disfrazado.

Actualmente utilizo el almacenamiento en caché en todo el sitio e implemento la función de eliminar el caché en función de la lógica empresarial al interceptar el evento de enrutamiento de la página que sale. Los siguientes fragmentos de código son de referencia:

• Ponga la vista del enrutador en el modo de mantener vivo, y todo el sitio usará el caché de forma predeterminada.
  <keep-alive><router-view class="transit-view"></router-view></keep-alive>
• Coloqué en capas todas las páginas de las rutas. Por ejemplo, meta.rank representa el nivel de la página, como 1.5> 2.5> 3.5 significa ingresar a la segunda capa desde la primera capa a la tercera capa.

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},                            },
]

• Debido a que todas las páginas se almacenan en caché, la idea central es [¿Cuándo se destruirá la caché? ]. Mi diseño es: el caché de la página actual se mantendrá cuando se cambie a la página siguiente en el mismo nivel, y [el caché de la página actual se destruirá cuando regrese a la página anterior].
• Entonces, en main.js, utilicé el método Vue.mixin para interceptar el evento de salida de ruta e implementé la función de destruir el caché de la página en el método de intercepción. El código central es el siguiente:

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();
    },
});

Resumen: De hecho, a través del componente keepAlive de nivel superior donde se encuentra el componente de página, la lista de caché en el objeto se manipula violentamente. . .

Sencillo y sencillo, aunque no muy elegante, es fácil de usar, jaja :)

Por supuesto, todavía espero que la API de soporte oficial salga mejor.

Pero de esta manera la memoria no se liberará. Apago keepalive y estará bien. Agregar keepalive y luego quitar manualmente el caché y destruir la memoria sigue aumentando. Me pregunto si ha prestado atención a este aspecto.

@Liudapeng No he estudiado detenidamente el uso de la memoria antes. Hice una prueba aproximada y no la estudié detenidamente después de ver la caída de la memoria en la línea de tiempo del gráfico de memoria.

Últimamente estoy un poco ocupado. Vi tu mensaje hace dos días y no he tenido tiempo de responderte.

Acabo de hacer otra prueba, repetida varias veces para profundizar en los cinco o seis niveles de la página y luego volver a la página de inicio. Los resultados de la línea de tiempo de la memoria son los siguientes:

• Active Keep-Alive y destruya dinámicamente el componente (es decir, use el método que mencioné anteriormente):
  > Puedes ver claramente la caída de la memoria en la línea de tiempo. Creo que la memoria está destruida.
  

No utilice Keep-Alive:

Debido a que no hay keepalive, la pila de memoria no será muy rápida, pero seguirá aumentando cada vez más (tal vez mi código se cambie rápidamente y haya pérdidas de memoria en otros lugares)

Pero, en general, creo que después de usar la destrucción dinámica, el uso de la memoria todavía está dentro del rango aceptable, por lo que si experimenta un aumento significativo en la memoria, debe verificar si el evento vinculante no se destruye cuando se destruye el componente (lo que causa que aunque el componente se elimina de la matriz de caché de keepAlive, no se destruye de la memoria).

Por favor revise de nuevo.

@wanyaxing tengo el mismo problema en mi proyecto, sin mantener vivo ：

Llamar al $ destory () del componente dinámico no funciona, y encuentro que los montones de JS aumentan con el número de nodos. Parece que el componente dinámico creó los DOM sin destruirlos.

@bigggge name es el atributo dentro del componente, no el atributo de la ruta

Mi pregunta es aún más extraña. Mi versión vue es 2.3.3. La página A tiene un código para desplazarse para cargar la página siguiente. Cambié de la página A a la página B. Cuando se desplazó la página B, descubrí que el código de la página A para cargar la página siguiente aún se ejecutará. Cuando elimino el Keep-Alive global, el problema anterior no ocurrirá. Pero todos mis activados son inválidos nuevamente, tengo que usar created.

Mi pregunta es aún más extraña. Mi versión vue es 2.3.3. La página A tiene un código para desplazarse para cargar la página siguiente. Cambié de la página A a la página B. Cuando se desplazó la página B, descubrí que el código de la página A para cargar la página siguiente aún se ejecutará. Cuando elimino el Keep-Alive global, el problema anterior no ocurrirá. Pero todos mis activados son inválidos nuevamente, tengo que usar created.

Puede ser causado por el monitoreo global, puede juzgar si es la ruta actual cuando se desplaza y luego decidir si cargar la página siguiente

Mi pregunta es aún más extraña. Mi versión vue es 2.3.3. La página A tiene un código para desplazarse para cargar la página siguiente. Cambié de la página A a la página B. Cuando se desplazó la página B, descubrí que el código de la página A para cargar la página siguiente aún se ejecutará. Cuando elimino el Keep-Alive global, el problema anterior no ocurrirá. Pero todos mis activados son inválidos nuevamente, tengo que usar created.

Puede ser causado por el monitoreo global, puede juzgar si es la ruta actual cuando se desplaza y luego decidir si cargar la página siguiente

Sí, utilizo el complemento vue-infinite-scroll. Cuando uso el mantenimiento global, no elimina el evento de supervisión. He reescrito este complemento.

Usé el script de
https://gist.github.com/lingceng/c204bac2704d03db99932d5457e662e6

@jkzing ¿Qué

También tengo esta pregunta. Incluir no puede cumplir con este requisito. Si varias páginas de enrutamiento corresponden a un componente, entonces solo hay un nombre de componente. ¿Qué debo hacer?

Cuando se cambia la pestaña, la caché se cierra y la caché se destruye y la próxima vez que se abre y se vuelve a cargar con varias páginas de subenrutamiento anidadas, lo mismo ocurre.

@ heng1234Hola, ¿has resuelto este problema? ¿Quién puede dejar una información de contacto para orientación?

No cambie de página por enrutamiento y cambie por componentes
https://blog.csdn.net/qq_39313596/article/details/82628953

[email protected]

De: Codezero123
Tiempo de envío: 2019-12-03 10:04
Destinatario: vuejs / vue
Cc: hlvy; Mención
Asunto: Re: [vuejs / vue] Espero que keep-alive pueda aumentar la función de eliminar dinámicamente componentes en caché (# 6509)
Cuando se cambia la pestaña, la caché se cierra y la caché se destruye y la próxima vez que se abre y se vuelve a cargar con varias páginas de subenrutamiento anidadas, lo mismo ocurre.
@ heng1234Hola, ¿has resuelto este
Recibes esto porque te mencionaron.
Responda a este correo electrónico directamente, véalo en GitHub o cancele la suscripción.

@wanyaxing, no es efectivo para la caché de enrutamiento de tres niveles. Por ejemplo, en vue-element-admin, cuando se habilitan varias etiquetas de etiqueta de tres niveles, cambiar la etiqueta de etiqueta no destruirá el componente de la caché, sino que solo abrirá un tercio -Etiqueta de etiqueta de enrutamiento de nivel., Puede ser destruida. Por ejemplo, habilite los siguientes menu1-0 y menu1-1.
enrutamiento.
{ 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) {
si (esto. $ vnode && esto. $ 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();

},
}); `

La idea es este tipo de idea. No hay problema con la idea. Cuándo llamar y destruir el caché, depende de la implementación específica en su negocio.

Este tipo de escenario en nuestro lado comercial debería ser muy escenario:
1. He navegado por varias páginas y necesito almacenarlo en caché.
2. Haga clic para salir, debe borrar todo el caché
3. Hay otros mensajes de error de redireccionamiento después de iniciar sesión, estas páginas no se almacenan en caché.
4. El inicio de sesión es exitoso y la nueva página continúa almacenada en caché.

Ahora descubrí que era imposible borrar todos los cachés cuando llegaba a 2. Poner el valor máximo de keep-alive en vuex y establecerlo en 1 todavía no es válido, dependiendo de las herramientas de desarrollo de vue, todavía hay páginas en caché.
Lo que me resulta aún más extraño es que saltar a otras páginas que no son de inicio de sesión en 3 activará el montaje de la página almacenada en caché en 1, y al mirar las herramientas para desarrolladores, estas páginas están inactivas. Oye, esto conduce a una lógica de página diferente. Tipo de problema.
Después de buscar durante mucho tiempo, todavía no sé por qué

Este tipo de escenario en nuestro lado comercial debería ser muy escenario:
1. He navegado por varias páginas y necesito almacenarlo en caché.
2. Haga clic para salir, debe borrar todo el caché
3. Hay otros mensajes de error de redireccionamiento después de iniciar sesión, estas páginas no se almacenan en caché.
4. El inicio de sesión es exitoso y la nueva página continúa almacenada en caché.

Ahora descubrí que era imposible borrar todos los cachés cuando llegaba a 2. Poner el valor máximo de keep-alive en vuex y establecerlo en 1 todavía no es válido, dependiendo de las herramientas de desarrollo de vue, todavía hay páginas en caché.
Lo que me resulta aún más extraño es que saltar a otras páginas que no son de inicio de sesión en 3 activará el montaje de la página almacenada en caché en 1, y al mirar las herramientas para desarrolladores, estas páginas están inactivas. Oye, esto conduce a una lógica de página diferente. Tipo de problema.
Después de buscar durante mucho tiempo, todavía no sé por qué

En su escenario, en el momento de 2, debería considerar actualizar la página directamente, que es la solución más segura y directa.

Dado que incluye corresponde al nombre del componente, ¿qué pasa si varias rutas corresponden a un componente? ¿Hay alguna forma de dar un nombre diferente al mismo componente?