Teilen Sie eine äußerst komfortable Vue-Seitenverwaltungslösung

Dieser Artikel vermittelt Ihnen hauptsächlich eine äußerst komfortable Vue-Seiten-Keep-Alive-Lösung. Nachfolgend finden Sie Codebeispiele hoffe es hilft allen.

Was tun Sie, um das Keep-Alive der Seite stabiler zu machen?

Ich habe es mit einer Konfigurationszeile implementiert

Vue-Seiten-Keep-Alive-Mittel Wenn der Benutzer die aktuelle Seite verlässt, kann er bei seiner Rückkehr den Zustand der zuletzt besuchten Seite wiederherstellen. Diese Technologie ermöglicht Benutzern ein reibungsloseres und natürlicheres Surferlebnis, ohne durch umständliche Vorgänge gestört zu werden.

Warum müssen Sie die Seite am Leben halten?

Das Leben der Seite kann das Benutzererlebnis verbessern. Wenn der Benutzer beispielsweise von einer Tabellenseite mit Paginierung ([Seite A]) zur Datendetailseite ([Seite B]) springt und nach dem Anzeigen der Daten von [Seite B] zu [Seite A] zurückkehrt ] , wenn es keine Seitenerhaltung gibt, wird [Seite A] neu geladen und springt zur ersten Seite, was den Benutzer sehr verärgert, weil er die Seite und die Daten erneut auswählen muss. Wenn der Benutzer daher zu [Seite A] zurückkehrt, können mithilfe der Page-Keep-Alive-Technologie die zuvor ausgewählte Seitennummer und die zuvor ausgewählten Daten wiederhergestellt werden, was das Benutzererlebnis reibungsloser macht.

Wie halte ich die Seite am Leben?

Zustandsspeicherung

Diese Lösung ist die intuitivste. Das Prinzip besteht darin, den Zustand, der am Leben gehalten werden muss, vor dem Verlassen von [Seite A] manuell zu speichern. Der Status kann in LocalStore, SessionStore oder IndexedDB gespeichert werden. Überprüfen Sie im onMounted-Hook der Komponente [Seite A], ob der vorherige Status vorhanden ist, und stellen Sie den Status gegebenenfalls aus dem externen Speicher wieder her. LocalStore、SessionStore或IndexedDB。在【页面A】组件的onMounted钩子中，检测是否存在此前的状态，如果存在从外部存储中将状态恢复回来。

有什么问题？

• 浪费心智（麻烦/操心）。这个方案存在的问题就是，需要在编写组件的时候就明确的知道跳转到某些页面时进行状态存储。
• 无法解决子组件状态。在页面组件中还可以做到保存页面组件的状态，但是如何保存子组件呢。不可能所有的子组件状态都在页面组件中维护，因为这样的结构并不是合理。

组件缓存

利用Vue的内置组件<keepalive></keepalive>缓存包裹在其中的动态切换组件（也就是<component></component>组件）。<keepalive></keepalive>包裹动态组件时，会缓存不活跃的组件，而不是销毁它们。当一个组件在<keepalive></keepalive>中被切换时，activated和deactivated生命周期钩子会替换mounted和unmounted钩子。最关键的是，<keepalive></keepalive>不仅适用于被包裹组件的根节点，也适用于其子孙节点。

<keepalive></keepalive>搭配vue-router即可实现页面的保活，实现代码如下：

<template>
  <RouterView v-slot="{ Component }">
    <KeepAlive>
      <component :is="Component"/>
    </KeepAlive>
  </RouterView>
</template>

有什么问题？

• 页面保活不准确。上面的方式虽然实现了页面保活，但是并不能满足生产要求，例如：【页面A】是应用首页，【页面B】是数据列表页，【页面C】是数据详情页。用户查看数据详情的动线是：【页面A】->【页面B】->【页面C】，在这条动线中【页面B】->【页面C】的时候需要缓存【页面B】，当从【页面C】->【页面B】的时候需要从换从中恢复【页面B】。但是【页面B】->【页面A】的时候又不需要缓存【页面B】，上面的这个方法并不能做到这样的配置。

最佳实践

最理想的保活方式是，不入侵组件代码的情况下，通过简单的配置实现按需的页面保活。

【不入侵组件代码】这条即可排除第一种方式的实现，第二种【组件缓存】的方式只是败在了【按需的页面保活】。那么改造第二种方式，通过在router的路由配置上进行按需保活的配置，再提供一种读取配置结合<keepalive></keepalive>的include属性即可。

路由配置

src/router/index.ts

import useRoutersStore from '@/store/routers';

const routes: RouteRecordRaw[] = [
  {
    path: '/',
    name: 'index',
    component: () => import('@/layout/index.vue'),
    children: [
      {
        path: '/app',
        name: 'App',
        component: () => import('@/views/app/index.vue'),
      },
      {
        path: '/data-list',
        name: 'DataList',
        component: () => import('@/views/data-list/index.vue'),
        meta: {
          // 离开【/data-list】前往【/data-detail】时缓存【/data-list】
          leaveCaches: ['/data-detail'],
        }
      },
      {
        path: '/data-detail',
        name: 'DataDetail',
        component: () => import('@/views/data-detail/index.vue'),
      }
    ]
  }
];

router.beforeEach((to: RouteLocationNormalized, from: RouteLocationNormalized, next: NavigationGuardNext) => {
  const { cacheRouter } = useRoutersStore();
  cacheRouter(from, to);
  next();
});

保活组件存储

src/stroe/router.ts

import { RouteLocationNormalized } from 'vue-router';

const useRouterStore = defineStore('router', {
  state: () => ({
    cacheComps: new Set<string>(),
  }),
  actions: {
    cacheRouter(from: RouteLocationNormalized, to: RouteLocationNormalized) {
      if(
        Array.isArray(from.meta.leaveCaches) && 
        from.meta.leaveCaches.inclued(to.path) && 
        typeof from.name === &#39;string&#39;
      ) {
        this.cacheComps.add(form.name);
      }
      if(
        Array.isArray(to.meta.leaveCaches) && 
        !to.meta.leaveCaches.inclued(from.path) && 
        typeof to.name === &#39;string&#39;
      ) {
        this.cacheComps.delete(to.name);
      }
    },
  },
  getters: {
    keepAliveComps(state: State) {
      return [...state.cacheComps];
    },
  },
});

页面缓存

src/layout/index.vue

Haben Sie Fragen?

• Geistesverschwendung (Ärger/Sorgen). Das Problem bei dieser Lösung besteht darin, dass Sie beim Schreiben der Komponente den Status zum Speichern beim Springen zu bestimmten Seiten genau kennen müssen.
• Der Status der untergeordneten Komponente kann nicht aufgelöst werden. Sie können den Status von Seitenkomponenten auch in Seitenkomponenten speichern, aber wie speichert man Unterkomponenten? Es ist unmöglich, alle Unterkomponentenzustände in der Seitenkomponente beizubehalten, da eine solche Struktur nicht sinnvoll ist.

Komponenten-Caching#🎜🎜#Verwenden der integrierten Komponenten von VueZwischenspeichern der darin eingeschlossenen dynamischen Switching-Komponente (d. h. <component></component>-Komponente). <keepalive></keepalive>Beim Umschließen dynamischer Komponenten werden inaktive Komponenten zwischengespeichert, anstatt sie zu zerstören. Wenn eine Komponente in <keepalive></keepalive> umgeschaltet wird, ersetzen die Lebenszyklus-Hooks aktiviert und deaktiviert den Code montiert > und unmounted Hooks. Das Wichtigste ist, dass <keepalive></keepalive> nicht nur für den Stammknoten der umschlossenen Komponente gilt, sondern auch für deren untergeordnete Knoten. #🎜🎜##🎜🎜#<keepalive></keepalive> kann mit vue-router verwendet werden, um die Seite am Leben zu halten: #🎜 🎜#

<template>
  <RouterView v-slot="{ Component }">
    <KeepAlive :include="keepAliveComps">
      <component :is="Component"/>
    </KeepAlive>
  </RouterView>
</template>

<script setup>
import { storeToRefs } from &#39;pinia&#39;;
import useRouterStore from &#39;@/store/router&#39;;

const { keepAliveComps } = storeToRefs(useRouterStore());
</script>

nicht?

• Page Keep-Alive ist ungenau. Obwohl die obige Methode die Seitenerhaltung ermöglicht, kann sie die Produktionsanforderungen nicht erfüllen. Beispiel: [Seite A] ist die Anwendungshomepage, [Seite B] ist die Datenlistenseite und [Seite C] ist die Datendetailseite. Die bewegliche Zeile für Benutzer zum Anzeigen von Datendetails lautet: [Seite A]->[Seite B]->[Seite C]. In dieser beweglichen Zeile muss [Seite B]->[Seite C] zwischengespeichert werden [Seite B]: Wenn Sie von [Seite C] zu [Seite B] wechseln, müssen Sie [Seite B] von dort wiederherstellen. Wenn jedoch [Seite B] -> [Seite A] ist, besteht keine Notwendigkeit, [Seite B] zwischenzuspeichern. Mit der oben genannten Methode kann eine solche Konfiguration nicht erreicht werden.

Best Practice#🎜🎜##🎜🎜##🎜🎜#Der idealste Weg, am Leben zu bleiben, besteht darin, ohne in den Komponentencode einzudringen, weiter zu erreichen -Nachfrageseiten-Keep-Alive durch einfache Konfiguration. #🎜🎜##🎜🎜##🎜🎜# [Kein Eindringen in den Komponentencode] Dies kann die Implementierung der ersten Methode ausschließen. Die zweite Methode [Komponenten-Caching] schlägt nur bei [On-Demand-Seiten-Keep-Alive] fehl. . Transformieren Sie dann den zweiten Weg, indem Sie On-Demand-KeepAlive für die Routing-Konfiguration von router konfigurieren und dann eine Lesekonfiguration in Kombination mit <keepalive></keepalive> bereitstellen Das Attribut include ist ausreichend. #🎜🎜#

Routing-Konfiguration

#🎜🎜#src/router/index.ts#🎜🎜#

import 'vue-router';

export type LeaveCaches = string[];

declare module 'vue-router' {
  interface RouteMeta {
    leaveCaches?: LeaveCaches;
  }
}

Keep-Alive-Komponentenspeicher

#🎜🎜#src/stroe/router.ts#🎜🎜#rrreee

Seitencache

#🎜🎜#src/layout/index.vue#🎜🎜#

<template>
  <RouterView v-slot="{ Component }">
    <KeepAlive :include="keepAliveComps">
      <component :is="Component"/>
    </KeepAlive>
  </RouterView>
</template>

<script setup>
import { storeToRefs } from &#39;pinia&#39;;
import useRouterStore from &#39;@/store/router&#39;;

const { keepAliveComps } = storeToRefs(useRouterStore());
</script>

TypeScript提升配置体验

import 'vue-router';

export type LeaveCaches = string[];

declare module 'vue-router' {
  interface RouteMeta {
    leaveCaches?: LeaveCaches;
  }
}

该方案的问题

• 缺少通配符处理/*、/**/index。
• 无法缓存/preview/:address这样的动态路由。
• 组件名和路由名称必须保持一致。

总结

通过<routerview v-slot="{ Component }"></routerview>获取到当前路由对应的组件，在将该组件通过<component :is="Component"></component>渲染，渲染之前利用<keepalive :include="keepAliveComps"></keepalive>来过滤当前组件是否需要保活。 基于上述机制，通过简单的路由配置中的meta.leaveCaches = [...]来配置从当前路由出发到哪些路由时，需要缓存当前路由的内容。【推荐学习：《vue.js视频教程》】

如果大家有其他保活方案，欢迎留言交流哦！

Das obige ist der detaillierte Inhalt vonTeilen Sie eine äußerst komfortable Vue-Seitenverwaltungslösung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!