English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
keep-alive è un componente integrato di Vue, che può mantenere lo stato nel memory durante il passaggio tra componenti, prevenendo la ri-renderizzazione del DOM. Utilizzato con vue-router, può memorizzare l'intero contenuto di una view.
Utilizzo di base come segue:
<keep-alive> <component> <!-- Questo componente verrà cacheato! --> </component> </keep-alive>
Di solito c'è questa esigenza, quando entriamo per la prima volta nella pagina della lista è necessario richiedere i dati, quando entriamo nella pagina dettaglio e la pagina dettaglio non è in cache è necessario richiedere i dati e tornare alla pagina della lista
Ci sono due casi:
1. Clicca direttamente sul pulsante di ritorno del browser.
2. Clicca sul link /list nella barra di navigazione.
Quindi per il primo caso, quando torniamo alla pagina della lista tramite il pulsante di ritorno, non è necessario richiedere i dati.
Per il secondo caso, quando torniamo alla pagina della lista tramite il link, è necessario richiedere i dati.
Quindi ci sono tre casi:
1. E' necessario richiedere i dati quando si entra nella pagina della lista per impostazione predefinita.
2. Dopo aver entrato nella pagina dettaglio, tornare alla pagina della lista tramite il pulsante di ritorno predefinito del browser non richiede una richiesta AJAX.
3. Dopo aver entrato nella pagina dettaglio, è necessario inviare una richiesta AJAX per tornare alla pagina della lista dopo aver cliccato sul link.
La configurazione è la seguente:
1. La configurazione del file di ingresso app.vue è la seguente:
<!-- Cache tutte le pagine --> <keep-alive> <router-view v-if="$route.meta.keep_alive"></router-view> </keep-alive> <router-view v-if="!$route.meta.keep_alive"></router-view>
2. Imposta l'attributo meta nel router, imposta keepAlive: true per utilizzare la cache, false significa che non è necessario utilizzare la cache. Aggiungi anche il comportamento di scorrimento scrollBehavior
La configurazione di router/index.js è la seguente:
import Vue from 'vue';
import Router from 'vue-router';
// import HelloWorld from '@/views/HelloWorld';
Vue.use(Router);
const router = new Router({
mode: 'history', // il percorso di accesso non contiene il simbolo di hash, è necessario utilizzare il modello history per utilizzare scrollBehavior
base: '/page/app', // configurazione del percorso di base dell'applicazione single-page
routes: [
}
path: '/',
name: 'list',
component: resolve => require(['@/views/list'], resolve) // utilizza il caricamento differito
meta: {
keepAlive: true // true indica che è necessario utilizzare la cache
}
},
}
path: '/list',
name: 'list',
component: resolve => require(['@/views/list'], resolve) // utilizza il caricamento differito
meta: {
keepAlive: true // true indica che è necessario utilizzare la cache false indica che non deve essere cacheato
}
},
}
path: '/detail',
name: 'detail',
component: resolve => require(['@/views/detail'], resolve) // utilizza il caricamento differito
}
],
scrollBehavior (to, from, savedPosition) {
// Salva in meta per uso futuro
to.meta.savedPosition = savedPosition;
if (savedPosition) {
return { x: 0, y: 0 };
}
return {};
}
});
export default router;
3. Il codice di list.vue è il seguente:
<template>
<div class="hello">
<h1>vue</h1>
<h2>{{msg}}</h2>
<router-link to="/detail">Vai alla pagina dettaglio</router-link>
</div>
</template>
<script>
export default {
name: 'helloworld',
data () {
return {
msg: 'Benvenuto nella tua App Vue.js'
};
},
methods: {
ajaxRequest() {
const obj = {
'aa': 1
};
Promise.all([this.$store.dispatch('testUrl', obj)]).then((res) => {
console.log(res);
});
}
},
beforeRouteEnter(to, from, next) {
next(vm => {
/*
Se to.meta.savedPosition === undefined, significa che è necessario aggiornare la pagina o può essere chiamato la prima volta che si entra nella pagina, è necessario aggiornare i dati
Se savedPosition === null, significa che hai cliccato sul link di navigazione;
In questo caso è necessario aggiornare i dati, ottenere il nuovo contenuto della lista.
In caso contrario, non fare nulla, utilizza direttamente la cache di keep-alive
*/
if (to.meta.savedPosition === undefined) {
vm.ajaxRequest();
}
if (to.meta.savedPosition === null) {
vm.ajaxRequest();
}
}
}
};
</script>
4. Il codice di detail.vue è il seguente:
<template>
<div class="list">
<h1>{{msg}}</h1>
<router-link to="/list">Torna alla pagina della lista</router-link>
</div>
</template>
<script>
export default {
name: 'list',
data () {
return {
msg: 'Benvenuto nella tua App Vue.js'
};
},
created() {
this.ajaxRequest();
},
methods: {
ajaxRequest() {
const obj = {
'aa': 1
};
Promise.all([this.$store.dispatch('withdary', obj)]).then((res) => {
console.log(res);
});
}
}
};
</script>
Due: utilizzare l'estensione router.meta
Supponiamo di avere ora 3 pagine, le esigenze sono le seguenti:
1. C'è la pagina A di default, la pagina A ha bisogno di una richiesta quando entra.
2. La pagina B si sposta alla pagina A, la pagina A non deve richiedere di nuovo.
3. La pagina C si sposta alla pagina A, la pagina A deve richiedere di nuovo.
Il metodo di implementazione è il seguente:
Impostare l'attributo meta nel percorso A:
}
path: '/a',
name: 'A',
component: resolve => require(['@/views/a'], resolve),
meta: {
keepAlive: true // true indica che è necessario utilizzare la cache
}
}
Quindi tutto il codice sotto router/index diventa come segue:
import Vue from 'vue'; import Router from 'vue-router'; // import HelloWorld from '@/views/HelloWorld';
Vue.use(Router);
const router = new Router({
mode: 'history', // il percorso di accesso non contiene il simbolo di hash, è necessario utilizzare il modello history per utilizzare scrollBehavior
base: '/page/app', // configurazione del percorso di base dell'applicazione single-page
routes: [
}
path: '/',
name: 'list',
component: resolve => require(['@/views/list'], resolve) // utilizza il caricamento differito
meta: {
keepAlive: true // true indica che è necessario utilizzare la cache
}
},
}
path: '/list',
name: 'list',
component: resolve => require(['@/views/list'], resolve) // utilizza il caricamento differito
meta: {
keepAlive: true // true indica che è necessario utilizzare la cache false indica che non deve essere cacheato
}
},
}
path: '/detail',
name: 'detail',
component: resolve => require(['@/views/detail'], resolve) // utilizza il caricamento differito
},
}
path: '/a',
name: 'A',
component: resolve => require(['@/views/a'], resolve),
meta: {
keepAlive: true // true indica che è necessario utilizzare la cache
}
},
}
path: '/b',
name: 'B',
component: resolve => require(['@/views/b'], resolve)
},
}
path: '/c',
name: 'C',
component: resolve => require(['@/views/c'], resolve)
}
],
scrollBehavior (to, from, savedPosition) {
// Salva in meta per uso futuro
to.meta.savedPosition = savedPosition;
if (savedPosition) {
return { x: 0, y: 0 };
}
return {};
}
});
export default router;
Imposta beforeRouteLeave all'interno del componente B
beforeRouteLeave(to, from, next) {
// Imposta il meta della prossima rotta
to.meta.keepAlive = true; // Fare cache di A, non richiedere dati
next(); // Vai alla pagina A
}
Tutto il codice del componente B:
<template>
<div class="list">
<h1>{{msg}}</h1>
<router-link to="/a">Torna alla pagina a</router-link>
</div>
</template>
<script>
export default {
name: 'list',
data () {
return {
msg: 'Benvenuto sulla Pagina B'
};
},
created() {},
methods: {
},
beforeRouteLeave(to, from, next) {
// Imposta il meta della prossima rotta
to.meta.keepAlive = true; // Fare cache di A, non richiedere dati
next(); // Vai alla pagina A
}
};
</script>
Imposta beforeRouteLeave all'interno del componente C:
beforeRouteLeave(to, from, next) {
// Imposta il meta della prossima rotta
to.meta.keepAlive = false; // Non fare cache di A, richiedi dati nuovamente
console.log(to)
next(); // Vai alla pagina A
}
Tutto il codice del componente c:
<template>
<div class="list">
<h1>{{msg}}</h1>
<router-link to="/a">Torna alla pagina a</router-link>
</div>
</template>
<script>
export default {
name: 'list',
data () {
return {
msg: 'Benvenuto sulla Pagina B'
};
},
created() {},
methods: {
},
beforeRouteLeave(to, from, next) {
// Imposta il meta della prossima rotta
to.meta.keepAlive = false; // Non fare cache di A, richiedi dati nuovamente
console.log(to)
next(); // Vai alla pagina A
}
};
</script>
Tutto il codice all'interno del componente a:
<template>
<div class="hello">
<h1>vue</h1>
<h2>{{msg}}</h2>
<router-link to="/b">Vai alla pagina b</router-link>
<router-link to="/c">Vai alla pagina c</router-link>
</div>
</template>
<script>
export default {
name: 'helloworld',
data () {
return {
msg: 'Benvenuto su una Pagina'
};
},
methods: {
ajaxRequest() {
const obj = {
'aa': 1
};
Promise.all([this.$store.dispatch('testUrl', obj)]).then((res) => {});
}
},
beforeRouteEnter(to, from, next) {
next(vm => {
/*
Se to.meta.savedPosition === undefined, significa che è necessario aggiornare la pagina o può essere chiamato la prima volta che si entra nella pagina, è necessario aggiornare i dati
Se to.meta.keepAlive === false, allora significa che è necessario richiedere;
In questo caso è necessario aggiornare i dati, ottenere il nuovo contenuto della lista.
In caso contrario, non fare nulla, utilizza direttamente la cache di keep-alive
*/
if (to.meta.savedPosition === undefined) {
vm.ajaxRequest();
}
if (!to.meta.keepAlive) {
vm.ajaxRequest();
}
}
}
};
</script>
Attenzione: il componente b non richiede dati dal componente a (compresi i clic sui link e il pulsante Indietro del browser), il componente c richiede dati dal componente a (compresi i clic sui link e il pulsante Indietro del browser).
Visualizza il codice su github
Riepilogo
Di seguito è riassunto l'uso di keep-alive in vue2 e le precauzioni da considerare, spero possa essere utile a tutti. Se avete domande, lasciate un commento e il curatore risponderà prontamente. Ringraziamo anche il supporto del sito web di yells教程!
Dichiarazione: il contenuto di questo articolo è stato tratto da Internet, di proprietà del rispettivo autore. Il contenuto è stato contribuito e caricato autonomamente dagli utenti di Internet, il sito web non detiene i diritti di proprietà, non è stato editato manualmente e non assume responsabilità legali correlate. Se trovi contenuti sospetti di violazione del copyright, invia un'e-mail a notice#oldtoolbag.com (sostituisci # con @ durante l'invio dell'e-mail) per segnalare il problema e fornire prove pertinenti. Una volta verificata la violazione, il sito web eliminerà immediatamente il contenuto sospetto.