La Red de Conocimientos Pedagógicos - Currículum vitae - Cómo utilizar keep-alive en vue2

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()

},

métodos: {

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