Heim > Web-Frontend > js-Tutorial > Hauptteil

So verwenden Sie den angegebenen Komponenten-Cache von Vue

php中世界最好的语言
Freigeben: 2018-04-08 15:37:43
Original
2274 Leute haben es durchsucht

Dieses Mal erkläre ich Ihnen, wie Sie den vorgesehenen Komponenten-Cache von Vue verwenden.

Keep-Alive-EinführungKeep-Alive ist eine integrierte Komponente von Vue, die es den enthaltenen Komponenten ermöglicht, ihren Zustand beizubehalten oder einen Neustart zu vermeiden machen. Die Verwendung von

ist ebenfalls sehr einfach:

<keep-alive>
 <component>
 <!-- 该组件将被缓存! -->
 </component>
</keep-alive>
Nach dem Login kopieren
props

include

- string oder Regulärer Ausdruck, nur übereinstimmende Komponenten werden zwischengespeichert Ausschließen – Zeichenfolge oder Regex
, alle übereinstimmenden Komponenten werden nicht zwischengespeichert

// 组件 a
export default {
 name: 'a',
 data () {
 return {}
 }
}
<keep-alive include="a">
 <component>
 <!-- name 为 a 的组件将被缓存! -->
 </component>
</keep-alive>可以保留它的状态或避免重新渲染
<keep-alive exclude="a">
 <component>
 <!-- 除了 name 为 a 的组件都将被缓存! -->
 </component>
</keep-alive>可以保留它的状态或避免重新渲染
<keep-alive include="test-keep-alive">
 <!-- 将缓存name为test-keep-alive的组件 -->
 <component></component>
</keep-alive>
<keep-alive include="a,b">
 <!-- 将缓存name为a或者b的组件,结合动态组件使用 -->
 <component :is="view"></component>
</keep-alive>
<!-- 使用正则表达式,需使用v-bind -->
<keep-alive :include="/a|b/">
 <component :is="view"></component>
</keep-alive>
<!-- 动态判断 -->
<keep-alive :include="includedComponents">
 <router-view></router-view>
</keep-alive>
<keep-alive exclude="test-keep-alive">
 <!-- 将不缓存name为test-keep-alive的组件 -->
 <component></component>
</keep-alive>
Nach dem Login kopieren
mit Vue-Router

router-view ist auch eine Komponente, wenn es direkt in Keep-Alive verpackt ist, werden alle

view

-Komponenten, die dem Pfad entsprechen, zwischengespeichert:

Allerdings , das Produkt muss seine Anforderungen ständig ändern, und nichts kann es aufhalten...
<keep-alive>
 <router-view>
 <!-- 所有路径匹配到的视图组件都会被缓存! -->
 </router-view>
</keep-alive>
Nach dem Login kopieren

Problem

Wenn Sie nur etwas in der Router-Ansicht möchten, wird die Komponente zwischengespeichert , was soll ich tun?

Verwenden Sie include/exclude

, um das router.meta-Attribut hinzuzufügen.

Verwenden Sie include/exclude

exclude. Das Beispiel ist ähnlich.
// 组件 a
export default {
 name: 'a',
 data () {
 return {}
 }
}
<keep-alive include="a">
 <router-view>
 <!-- 只有路径匹配到的视图 a 组件会被缓存! -->
 </router-view>
</keep-alive>
Nach dem Login kopieren

Nachteile: Der Name der Komponente muss bekannt sein, keine gute Wahl, wenn das Projekt komplex ist.

Attribut router.meta hinzufügen

Vorteile: Nicht erforderlich um Beispiele zu geben Der Name der Komponente, die zwischengespeichert werden muss
// routes 配置
export default [
 {
 path: '/',
 name: 'home',
 component: Home,
 meta: {
 keepAlive: true // 需要被缓存
 }
 }, {
 path: '/:id',
 name: 'edit',
 component: Edit,
 meta: {
 keepAlive: false // 不需要被缓存
 }
 }
]
<keep-alive>
 <router-view v-if="$route.meta.keepAlive">
 <!-- 这里是会被缓存的视图组件,比如 Home! -->
 </router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive">
 <!-- 这里是不被缓存的视图组件,比如 Edit! -->
</router-view>
Nach dem Login kopieren

[Salt] Verwenden Sie router.meta zum Erweitern

Angenommen, es gibt 3 Routen: A, B, C.

Anforderungen:

Standardmäßig A anzeigen

B springt zu A, A wird nicht aktualisiert

C springt zu A, A wird aktualisiert
Implementierungsmethode

In Setze das Metaattribut in Route A:

Set beforeRouteLeave in Komponente B:
{
 path: '/',
 name: 'A',
 component: A,
 meta: {
 keepAlive: true // 需要被缓存
 }
}
Nach dem Login kopieren

Setze beforeRouteLeave in Komponente C:
export default {
 data() {
 return {};
 },
 methods: {},
 beforeRouteLeave(to, from, next) {
  // 设置下一个路由的 meta
 to.meta.keepAlive = true; // 让 A 缓存,即不刷新
 next();
 }
};
Nach dem Login kopieren

This Es kann erkannt werden, dass A nicht aktualisiert wird, wenn B zu A zurückkehrt. Wenn C jedoch zu A zurückkehrt, wird es aktualisiert.
export default {
 data() {
 return {};
 },
 methods: {},
 beforeRouteLeave(to, from, next) {
 // 设置下一个路由的 meta
 to.meta.keepAlive = false; // 让 A 不缓存,即刷新
 next();
 }
};
Nach dem Login kopieren

ZusammenfassungDie Routing-Methode ist gut, Sie müssen sich nicht darum kümmern, zu welcher Seite gesprungen wird, nur router.go(- 1) kann zurückgehen, es sind keine zusätzlichen Parameter erforderlich.

In Nicht-Einzelseitenanwendungen kann Keep-Alive jedoch nicht effektiv zwischengespeichert werden = =

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen , bitte achten Sie auf PHP Chinesisch Andere verwandte Artikel online!

Empfohlene Lektüre:

Wie man untergeordnete Komponenten in einer Angular-Elternkomponente aufruft


Wie man Vue für Anfänger lernt

Das obige ist der detaillierte Inhalt vonSo verwenden Sie den angegebenen Komponenten-Cache von Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!