Kongsi penyelesaian penyimpanan halaman Vue yang sangat selesa

Artikel ini membawakan anda pengetahuan yang berkaitan tentang Vue Ia terutamanya berkongsi dengan anda penyelesaian penyimpanan halaman Vue yang sangat selesa. Rakan-rakan yang berminat boleh lihat di bawah.

Untuk menjadikan halaman kekal hidup lebih stabil, apakah yang anda lakukan?

Saya melaksanakannya dengan satu baris konfigurasi

Halaman Vue kekal hidup bermakna selepas pengguna meninggalkan halaman semasa, mereka boleh kembali kepadanya Pulihkan keadaan halaman terakhir yang dilihat. Teknologi ini membolehkan pengguna menikmati pengalaman penyemakan imbas yang lebih lancar dan semula jadi tanpa diganggu oleh operasi yang menyusahkan.

Mengapa anda perlu memastikan halaman itu hidup?

Kekal hidup halaman boleh meningkatkan pengalaman pengguna. Contohnya, apabila pengguna melompat dari halaman jadual dengan penomboran ([Halaman A]) ke halaman butiran data ([Halaman B]), dan selepas melihat data, apabila pengguna kembali dari [Halaman B] ke [Halaman A ] , jika tiada halaman kekal hidup, [Halaman A] akan memuat semula dan melompat ke halaman pertama, yang akan membuat pengguna sangat marah kerana mereka perlu memilih semula halaman dan data. Oleh itu, menggunakan teknologi page keep-alive, apabila pengguna kembali ke [Halaman A], nombor halaman dan data yang dipilih sebelum ini boleh dipulihkan, menjadikan pengalaman pengguna lebih lancar.

Bagaimana untuk memastikan halaman itu hidup?

Storan Negeri

Penyelesaian ini adalah yang paling intuitif Prinsipnya adalah untuk menyimpan keadaan yang perlu disimpan secara manual sebelum meninggalkan [Halaman A]. Status boleh disimpan ke LocalStore, SessionStore atau IndexedDB. Dalam cangkuk onMounted komponen [Halaman A], semak sama ada keadaan sebelumnya wujud dan jika ya, pulihkan keadaan daripada storan luaran.

Sebarang pertanyaan?

• Membazir fikiran (susah/bimbang). Masalah dengan penyelesaian ini ialah anda perlu tahu dengan jelas semasa menulis komponen untuk menyimpan keadaan apabila melompat ke halaman tertentu.
• Tidak dapat menyelesaikan keadaan komponen anak. Anda juga boleh menyimpan status komponen halaman dalam komponen halaman, tetapi cara menyimpan sub-komponen. Adalah mustahil untuk mengekalkan semua keadaan subkomponen dalam komponen halaman kerana struktur sedemikian tidak munasabah.

Cache Komponen

Gunakan Vue komponen terbina dalam <keepalive></keepalive> untuk cache komponen pensuisan dinamik (iaitu, <component></component> komponen) yang dibungkus di dalamnya. <keepalive></keepalive>Apabila membungkus komponen dinamik, komponen tidak aktif dicache dan bukannya memusnahkannya. Apabila komponen ditogol dalam <keepalive></keepalive>, cangkuk activated dan deactivated kitar hayat menggantikan cangkuk mounted dan unmounted. Perkara yang paling penting ialah <keepalive></keepalive> digunakan bukan sahaja pada nod akar komponen yang dibalut, tetapi juga pada nod keturunannya.

<keepalive></keepalive> boleh digunakan dengan vue-router untuk memastikan halaman terus hidup Kod pelaksanaan adalah seperti berikut:

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

Apa masalahnya?

• Halaman kekal hidup adalah tidak tepat. Walaupun kaedah di atas mencapai halaman kekal hidup, ia tidak dapat memenuhi keperluan pengeluaran Contohnya: [Halaman A] ialah halaman utama aplikasi, [Halaman B] ialah halaman senarai data dan [Halaman C] ialah halaman butiran data. Baris bergerak untuk pengguna melihat butiran data ialah: [Halaman A]->[Halaman B]->[Halaman C]. [ Halaman B], apabila menukar daripada [Halaman C]->[Halaman B], anda perlu memulihkan [Halaman B] daripadanya. Walau bagaimanapun, apabila [Halaman B] -> [Halaman A], tidak perlu untuk cache [Halaman B].

Amalan Terbaik

Cara paling ideal untuk terus hidup adalah untuk mencapai halaman atas permintaan keepalive melalui konfigurasi mudah tanpa menceroboh kod komponen.

[Tiada pencerobohan ke dalam kod komponen] Peraturan ini boleh menghapuskan pelaksanaan kaedah pertama Kaedah kedua [caching komponen] hanya dikalahkan oleh [on-demand page keep-alive]. Kemudian ubah suai cara kedua, dengan mengkonfigurasi on-demand keep-alive pada konfigurasi penghalaan router, dan kemudian sediakan konfigurasi baca digabungkan dengan atribut <keepalive></keepalive> include.

Konfigurasi laluan

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

Storan komponen kekalkan hidup

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];
    },
  },
});

Halaman cache

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视频教程》】

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

Atas ialah kandungan terperinci Kongsi penyelesaian penyimpanan halaman Vue yang sangat selesa. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!