Resuelva el problema de caché de la página de mantenimiento cuando vue-router
Al envolver componentes dinámicos con keep-alive, las instancias de componentes inactivos se almacenan en caché en lugar de destruirse. keep-alive es un componente abstracto: no representa un elemento DOM en sí mismo, ni aparece en la cadena de componentes principales. Cuando un componente se cambia dentro de keep-alive, sus funciones de enlace de ciclo de vida activadas y desactivadas se ejecutarán en consecuencia.
Función: mantenga el estado en la memoria durante el cambio de componentes, evite la representación repetida de DOM, reduzca el tiempo de carga y el consumo de rendimiento, y mejore la experiencia del usuario.
Principio: cuando se llama a la función creada, guarde el nodo VNode que debe almacenarse en caché en this.cache; al renderizar (representación de página), si el nombre del VNode cumple con las condiciones de caché (se puede controlar mediante incluir y excluir), será de this.cache Extraiga la instancia de VNode previamente almacenada en caché para renderizar.
En nuestro desarrollo diario, a veces nos encontramos con el almacenamiento en caché de páginas, especialmente para proyectos de comercio electrónico, donde algunos estados de la lista de productos deben almacenarse en caché.
La siguiente es una breve introducción a varias formas de almacenamiento en caché de rutas vue.
almacenar en caché todo
keep-aliveEnvuelva la etiqueta directamente con router-viewla etiqueta para almacenar en caché todas las páginas
<keep-alive>
<router-view></router-view>
</keep-alive>
Almacenar en caché una sola ruta especificada
También envuelva directamente keep-alivela etiqueta con la etiqueta router-viewy luego use include el nombre de la página que debe almacenarse en caché
Puede usar v-bindpara vincular una matriz de nombres, o puede usar ',' para separarla, o puede usar expresiones regulares. En múltiples casos, se recomienda utilizar el tercero.
注意：是缓存页面的 name 名称，而不是缓存页面路由的 name 名称
<keep-alive include="该路由的name名称">
<router-view></router-view>
</keep-alive>
<!-- 逗号分隔字符串 -->
<keep-alive include="a,b">
<component :is="view"></component>
</keep-alive>
Caché múltiples rutas especificadas
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
Use dos router-viewetiquetas como salidas de ruta para almacenamiento en caché y no almacenamiento en caché respectivamente. Al configurar la ruta, solo necesita agregar meta atributos a la página para almacenar en caché y luego keepAliveestablecer el atributo agregado en verdadero. Por ejemplo:
{
path:'/test',
name:'Test',
component: Test,
meta: {
keepAlive: true} //true缓存 false不缓存
}
activado和desactivado
activated, deactivated estas dos funciones del ciclo de vida deben estar keep-alivedisponibles después de que se utilice el componente; de lo contrario, no existirán.
Cuando se introduce keep-alive, la página entra primero en
la secuencia de activación de ganchos created-> mounted -> activatedy se dispara cuando sale deactivated.
Al volver a entrar (hacia adelante o hacia atrás), solo activeactivated
注意：keep-alive里面紧跟包裹 router-view 组件，而不能出现其他标签，不然会导致无法缓存页面。
