Cómo utilizar keep-alive en vue2
keep-alive es un componente integrado de Vue que retiene el estado en la memoria cuando los componentes cambian para evitar que DOM se vuelva a representar, y funciona con vue-router para almacenar en caché todo el contenido de la vista.
El uso básico es el siguiente:
lt; keep-alivegt;
lt; -- ¡Este componente se almacenará en caché!
lt;/componentgt;
lt;/keep-alivegt;
Generalmente, cuando ingresamos a la página de lista por primera vez, debemos solicitar datos Y cuando entro a la página de detalles no almacenados en caché desde la página de lista y luego regreso a la página de lista, necesito solicitar datos
Hay dos situaciones:
1. Directamente. haga clic en Volver en el botón del navegador.
2. Haga clic en el enlace /list en la barra de navegación para regresar.
Así, en el primer caso, cuando hagamos clic directamente en el botón Atrás, volveremos a la página de lista (/list) sin solicitar datos.
En el segundo caso, volvemos a la página del listado a través de un enlace que requiere que se soliciten datos.
Entonces, aquí hay tres situaciones:
1. De forma predeterminada, se requiere una solicitud de datos para regresar a la página de lista.
2. Después de ingresar a la página de detalles, regresamos a la página a través del botón de retorno predeterminado del navegador, que no requiere una solicitud ajax.
3. Después de ingresar a la página de detalles, hacer clic en el enlace para regresar a la página de la lista también requiere enviar una solicitud ajax.
La configuración es la siguiente:
1. La configuración del archivo de entrada app.vue es la siguiente:
lt;! -- Almacenar en caché todas las páginas --gt;
lt;keep-alivegt;
lt;router-view v-if="$route.meta.keep_alive"gt;lt; /router-viewgt;
lt;/! keep-alivegt;
lt;router-view v-if="!$route.meta.keep_alive"gt;lt;/ router-viewgt;
2. Establezca el atributo meta en el enrutador en keepAlive: verdadero significa que se requiere almacenamiento en caché, falso significa que no se requiere almacenamiento en caché.
Y agregue el comportamiento de desplazamiento scrollBehavior
La configuración de router/index.js es la siguiente:
importar Vue desde 'vue';
importar enrutador desde ' vue-router' ;
// importar HelloWorld desde '@/views/HelloWorld';
Vue.use(Router);
const router = nuevo Router({
mode: 'history', // El uso de scrollBehavior requiere acceso al modo de historial de rutas sin etiqueta de tic
base: '/page/app', // Configura el aplicación de una sola página Ruta básica
rutas: [
{
ruta: '/',
nombre: 'lista',
componente: resolve =gt; require(['@/views/list'], resolve), // Usa carga diferida
meta: {
keepAlive: true // true indica la necesidad de almacenamiento en caché
}
},
{
ruta: '/list',
nombre: 'lista',
componente: resolver =gt; require(['@/views/list'], resolver), // Usar carga diferida
meta: {
keepAlive: true // verdadero significa que se requiere el almacenamiento en caché, falso significa que no se requiere el almacenamiento en caché
}
},
{
ruta: '/detalle',
nombre: 'detalle',
componente: resolve =gt require(['@; /views/detail'], resolve) // Usar carga diferida
}
],
scrollBehavior (hacia, desde, savePosition) {
// Guardar en el meta para realizar una copia de seguridad
to.meta.savedPosition = savePosition;
if (savedPosition) {
return { x: 0, y: 0};
p>
}
Devuelve {};
}
}); /p>
Exportar enrutador predeterminado
3. El código list.vue es el siguiente:
lt; class="hola"gt;
lt; h1gt .vuelt;/h1gt;
lt;h2gt;{{msg}}lt;/h2gt;
lt;router-link to="/detail"gt;Ir a la página de detalleslt;/router-linkgt;
lt;/
p gt;
lt;/templategt;
lt;scriptgt;
exportar nombre predeterminado {
: 'holamundo',
data () {
return {
msg： 'Bienvenido a tu aplicación Vue.js'
};
},
métodos: {
ajaxRequest() {
const obj = {
'aa': 1
};
Promesa.all([this.$store.dispatch('testUrl', obj)]).then((res) =gt; {
console.log(res);
});
}
},
beforeRouteEnter(hacia, desde, siguiente ) {
next(vm =gt; {
/*
Si to.meta.savedPosition === no está definido, significa que se trata de un actualizar la página, o se puede llamar al ingresar a la página por primera vez
Si savePosition ==== null, significa que se ha hecho clic en el enlace de navegación
En este momento; tiempo, los datos deben actualizarse. Obtenga nuevos contenidos de la lista.
De lo contrario, no haga nada y use el caché en keep-alive
*/
if (to.meta.savedPosition === undefinido) {
vm.ajaxRequest()ajaxRequest();
}
if (to.meta.savedPosition === null) {
vm. ajaxRequest();
}
})
}
};
lt /scriptgt;
4. El código de vue es el siguiente:
lt; templategt;
lt;p class="list"gt; lt; h1gt; {{msg}}lt; /h1gt;
lt; enrutador-link to="/list"gt; p>lt;/pgt;
lt;/templategt;
lt;scriptgt;
exportar nombre predeterminado {
: lista ',
data () {
return {
msg: 'Bienvenido a tu aplicación Vue.js'
};
},
creado() {
this.ajaxRequest();
},
métodos: {
p>ajaxRequest() {
const obj = {
'aa': 1
};
Promesa all([this.$store.dispatch('withdary', obj) ]).then((res) =gt; {
console.log(res);
. } );
}
}
};
lt;/scriptgt
II: Uso router .meta extensión
Supongamos que ahora hay 3 páginas y sus requisitos son los siguientes:
1. Existe la página A de forma predeterminada. La página A entra y requiere una solicitud.
2. La página B salta a la página A y la página A no requiere una nueva solicitud.
3. La página C salta a la página A, lo que requiere una nueva solicitud.
La implementación específica es la siguiente:
Establezca el metaatributo en la ruta A:
{
ruta: '/a' ,
p>nombre: 'A',
componente: resolver =gt; require(['@/views/a'], resolver),
meta: {
keepAlive: true // true significa que se requiere almacenamiento en caché
}
}
Por lo tanto, todo el código debajo router/index se convierte en Se incluye el siguiente contenido:
importar Vue desde 'vue';
importar enrutador desde 'vue-router';
// importar HolaMundo de '@/views /HelloWorld';
Vue.use(Router);