Directorio de artículos
El papel del componente keep-alive en vue
Keep-alive se utiliza para conservar el estado del componente y evitar volver a renderizarlo.
Este problema también se puede llamar
atributo de caché de ruta:
- incluir: cadena o expresión regular. Sólo se almacenarán en caché los componentes coincidentes.
- excluir: cadena o expresión regular. Los componentes coincidentes no se almacenarán en caché.
Por ejemplo: si hay una página de lista y una página de detalles, entonces el usuario a menudo ejecutará Abrir detalles => Volver a la lista => Abrir detalles. En este caso, la lista y los detalles son páginas muy frecuentes, entonces puede usar <keep para el componente de lista. -alive></keep-alive> cachés, de modo que cada vez que el usuario regrese a la lista, se pueda renderizar rápidamente desde el caché en lugar de volver a renderizarlo.
1. Todo el caché
El uso de la etiqueta Keep-alive para ajustar la vista del enrutador puede lograr un almacenamiento en caché completo
<keep-alive>
<router-view> </router-view>
</keep-alive>
2. Almacenar en caché una única ruta especificada
Utilice también la etiqueta Keep-alive para ajustar la vista del enrutador y utilice include en Keep-alive para especificar el nombre de la página que debe almacenarse en caché.
<keep-alive include='缓存页面的名称'>
<router-view> </router-view>
</keep-alive>
3. Almacenar en caché varias rutas especificadas
Debe usar dos etiquetas de vista de enrutador, una como salida de caché y la otra como salida sin caché, luego agregar el metaatributo a la página almacenada en caché durante la configuración de enrutamiento y luego establecer el valor keepAlive.
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
{
path:'/car',
name:'car',
component: Car,
meta: {
keepAlive: true} //true缓存 false不缓存
}