Cómo utilizar keep-alive en vue2
Esta vez le mostraré cómo usar keep-alive en vue2 y cuáles son las precauciones para usar keep-alive en vue2. El siguiente es un caso práctico, echemos un vistazo.
keep-alive es un componente integrado de Vue, que puede retener el estado en la memoria durante el cambio de componente para evitar la representación repetida del DOM. Combinado con vue-router, se puede almacenar en caché todo el contenido de una vista.
El uso básico es el siguiente:
lt;keep-alivegt;
lt;componentgt;
lt;!-- ¡Este componente se almacenará en caché! --gt;
lt;/componentgt;
lt;/keep-alivegt;
Generalmente existe tal requisito cuando ingresamos por primera vez a la lista. La página necesita solicitar datos Cuando entro a la página de detalles desde la página de lista, la página de detalles necesita solicitar los datos incluso si no están almacenados en caché y luego regresa a la página de lista.
Hay dos. situaciones:
1. Simplemente haga clic en el botón Atrás del navegador.
2. Haga clic en el enlace /list en la barra de navegación para regresar.
En el primer caso, cuando usamos directamente el botón Atrás para volver a la página de lista (/list), no es necesario solicitar datos.
En el segundo caso, necesitamos solicitar datos para volver a la página del listado a través del enlace.
Entonces, aquí hay tres situaciones:
1. De forma predeterminada, debe solicitar datos al ingresar a la página de lista.
2. Después de ingresar a la página de detalles, regrese a través del botón Atrás predeterminado del navegador, que no requiere una solicitud ajax.
3. Después de ingresar a la página de detalles y regresar a la página de lista haciendo clic en el enlace, también debe enviar una solicitud ajax.
La configuración es la siguiente:
1. La configuración del archivo de entrada app.vue es la siguiente:
lt;!--Cache todas las páginas --gt;
p>
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. Configure el atributo meta en el enrutador y configure keepAlive: verdadero significa que es necesario usar el caché, falso significa que no es necesario usar el 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', // La ruta de acceso sin la marca hash requiere que el modo historial use scrollBehavior
base: '/page/app', // Configure una ruta base de aplicación de una sola página
rutas: [
{
ruta: '/',
nombre: 'lista ',
componente: resolve =gt; require(['@/views/list'], resolve), // Usa carga diferida
meta: {
keepAlive: true // true indica la necesidad de usar caché
}
},
{
ruta: '/ lista',
nombre: 'lista',
componente: resolver =gt; require(['@/views/list'], resolver), // Usar carga diferida
meta: {
keepAlive: true // verdadero significa que se debe usar el caché; falso significa que no es necesario almacenarlo en caché
}
},
{
ruta: '/detalle',
nombre: 'detalle',
componente : resolver =gt; require(['@/views/detail' ], resolver) // Usar carga diferida
}
],
scrollBehavior ( a, desde, posición guardada) {
// Guardar en meta para uso posterior
to.meta.savedPosition = posición guardada;
if (posición guardada) {
devolver { x: 0, y: 0 }
}
devolver {}; >});
exportar enrutador predeterminado
3. El código list.vue es el siguiente:
lt;templategt;
lt;p 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;/pgt;
<p>lt;/templategt;
lt;scriptgt;
exportar nombre predeterminado {
: 'helloworld',
datos ( ) {
return {
msg： 'Bienvenido a tu aplicación Vue.js'
}
},
métodos: {
ajaxRequest() {
const obj = {
'aa': 1
};
Promise.all([this.$store.dispatch('testUrl', obj)]).then((res) =gt; {
console.log(res) ;
});
}
},
beforeRouteEnter(hacia, desde, siguiente) {
next(vm =gt; {
/*
Si to.meta.savedPosition === indefinido, significa que la página se actualiza o los datos deben actualizarse al ingresar la página por primera vez
Si savePosition === null, entonces se hace clic en el enlace de navegación
En este momento, es necesario actualizar los datos para obtener el nuevo contenido de la lista;
De lo contrario, no haga nada y use el caché en keep-alive directamente
*/
if (to.meta.savedPosition === undefinido) {
vm.ajaxRequest();
}
if (to.meta.savedPosition === null) {
vm .ajaxRequest ();
}
})
}
};
lt;/scriptgt ;
4. El código de detalle.vue es el siguiente:
lt;templategt;
lt;p class="list"gt;
lt; h1gt; {{msg}}lt; /h1gt;
lt; enrutador-link to="/list"gt; >
lt;/pgt;
lt;/templategt;
lt;scriptgt;
exportar nombre predeterminado {
: ' lista',
datos () {
return {
msg: 'Bienvenido a tu aplicación Vue.js'
};
},
creado() {
this.ajaxRequest()
},
ajaxRequest() {
const obj = {
'aa': 1
};
Promise.all([this.$store.dispatch('withdary', obj)]).then((res) =gt; {
console.log(res);
});
}
}
}
lt;/scriptgt;
2: use la extensión router.meta
Supongamos que ahora hay 3 páginas, los requisitos son los siguientes:
1. Hay una página A de forma predeterminada y se requiere una solicitud para que entre la página A.
2. La página B salta a la página A y no es necesario volver a solicitar la página A.
3. La página C salta a la página A y es necesario volver a solicitar la página A.
La implementación es la siguiente:
Establece el metaatributo en la ruta A:
{
ruta: '/a',
p>nombre: 'A',
componente: resolver =gt; require(['@/views/a'], resolver),
meta: {
keepAlive: true // true significa que es necesario usar el caché
}
}
Entonces, todos los códigos bajo enrutador/índice se convierte en lo siguiente:
importar Vue desde 'vue';
importar enrutador desde 'vue-router';
// importar HelloWorld desde '@/views/HelloWorld' ;
Vue.use(Router);
const router = new Router({
modo: 'historial', / / ruta de acceso sin signo de almohadilla Debe usar el modo historial para usar scrollBehavior
base: '/page/app', // Configurar la ruta base de una aplicación de una sola página
rutas: [
{
ruta: '/',
nombre: 'lista',
componente: resolve =gt; require(['@/views/list' ], resolve), // Usar carga diferida
meta: {
keepAlive: true // true indica la necesidad de usar caché
}
},
{
ruta: '/lista',
nombre: 'lista' ,
componente: resolve = gt; require(['@/views/list'], resolve), // Usa carga diferida
meta: {
keepAlive: true // true significa que es necesario utilizar el caché false Indica que no es necesario almacenarlo en caché
}
},
{
ruta: '/detalle',
nombre: 'detalle',
componente: resolve =gt require(['@/views/detail'] , resolver) // Usar carga diferida
},
{
ruta: '/a',
nombre: 'A ',
componente: resolver =gt; require([' @/views/a'], resolver),
meta: {
keepAlive: true // verdadero indica la necesidad de usar caché
}
},
{
ruta: '/b',
nombre: 'B',
componente: resolve =gt; require(['@/views]
/b'], resolver)
},
{
ruta: '/c',
nombre: 'C' ,
componente: resolver =gt; require(['@/views/c'], resolver)
}
],
scrollBehavior (a, desde, posición guardada) {
// Guardar en meta para uso posterior
to.meta.savedPosition = posición guardada;
if ( posiciónguardada) {
retorno { x: 0, y: 0 }
}
retorno
}
});
exportar enrutador predeterminado;
Establecer beforeRouteLeave en el componente B
beforeRouteLeave(to, from, next) {
// Establecer la siguiente ruta meta
to.meta.keepAlive = true; // Dejar caché en A y no solicitar datos
next() // Saltar Ir a la página A
}
Todos los códigos del componente B son los siguientes:
lt; templategt; "list "gt;
lt;h1gt;{{msg}}lt;/h1gt;
lt;router-link to="/a"gt;volver a una páginalt ;/ router-linkgt;
lt;/pgt;
lt;/templategt;
lt;scriptgt;
exportar valor predeterminado {
nombre: 'lista',
datos () {
retorno {
mensaje: 'Bienvenido a la página B'
};
},
creado() {},
métodos: {
},
beforeRouteLeave(to, from, next) {
// Establece la siguiente ruta meta
to.meta.keepAlive = true; sin solicitud de datos
next(); // Saltar a la página A
}
};
lt;/scriptgt;
p>Establecer beforeRouteLeave en el componente C:
beforeRouteLeave(to, from, next) {
// Establecer el siguiente meta de ruta
to .meta.keepAlive = false; // Dejar que A no almacene en caché y solicite datos nuevamente
console.log(to)
next() // Saltar a la página A
p>}
Todos los códigos del componente c son los siguientes:
lt;
t;p class="list"gt;
lt;h1gt;{{msg}}lt;/h1gt;
lt;router-link to="/a"gt ;Volver a una páginalt;/router-linkgt;
lt;/pgt;
lt;/templategt;
lt;scriptgt;
exportar valor predeterminado {
nombre: 'lista',
datos () {
devolver {
mensaje: 'Bienvenido a la página B'
};
},
creado() {},
métodos: {
},
beforeRouteLeave(to, from, next) {
// Establece la siguiente ruta meta
to.meta.keepAlive = false / / Permitir que A no almacene en caché y solicite datos nuevamente
console.log(to)
next(); // Saltar a la página A
}
};
lt;/scriptgt;
Todos los códigos en un componente son los siguientes:
lt;templategt;
lt;p class="hola"gt;
lt;h1gt;vuelt;/h1gt;
lt;h2gt;{{msg}}lt;/h2gt
lt;router-link to="/b"gt;Ir a la página blt;/router-linkgt;
lt;router-link to="/c" gt ; saltar a la página clt;/router-linkgt;
lt;/pgt;
lt;/templategt;
lt;scriptgt;
exportar valor predeterminado {
nombre: 'hola mundo',
datos () {
devolver {
mensaje: 'Bienvenido a una página'
};
},
métodos: {
ajaxRequest() {
const obj = {
'aa': 1
};
Promise.all([this.$store.dispatch('testUrl', obj) ]).then((res) =gt; {});
}
},
beforeRouteEnter(hacia, desde, siguiente) {
next(vm =gt; {
/*
Si to.meta.savedPosition === indefinido, significa actualizar la página o llamar al primero Los datos debe actualizarse al ingresar a la página
Si to.meta.keepAlive === false, entonces se requiere una solicitud;
En este momento, los datos deben actualizarse para obtener nuevo contenido de la lista.
De lo contrario, no haga nada y use el caché en keep-alive directamente
*/
if (to.meta.savedPosition === undefinido) {
vm.ajaxRequest();
}
if (!to.meta.keepAlive) {
vm.ajaxRequest();
}
})
}
};
lt;/scriptgt;
p>Tenga en cuenta que el componente b no vuelve a solicitar datos del componente a (incluido hacer clic en enlaces y botones de retroceso del navegador), y el componente c solicita datos del componente a (incluido hacer clic en enlaces y botones de retroceso del navegador).
Creo que domina el método después de leer el caso de este artículo. Para obtener más información interesante, preste atención a otros artículos relacionados en Gxl.com.
Lectura recomendada:
Cómo implementa nodejs la función de empaquetado gulp
Análisis de los pasos para crear aplicaciones multipágina con webpack