Apakah yang perlu saya lakukan jika menu vue tidak dimuat semula?

Penyelesaian kepada menu vue tidak menyegarkan: 1. Tulis "99df3d3b411e1be071f4ada3d31f1e18dd6e4ababe59793a4ac75fb9e5c5550e" pada halaman indeks; 2. Tetapkan nama cache kepada "test-keep-alive"; 3. Konfigurasikan "{path: '/Material',name: 'Material'...}" dalam fail penghala.

Persekitaran pengendalian tutorial ini: sistem Windows 10, versi Vue 3, komputer Dell G3.

Apakah yang perlu saya lakukan jika menu vue tidak dimuat semula?

vue melaksanakan halaman tab (menu) penukaran komponen tanpa memuat semula halaman

vue melaksanakan halaman tab (menu) penukaran komponen tanpa memuat semula halaman (terus hidup )

7c9485ff8c3cba5ae9343ed63c2dc3f7 ialah komponen terbina dalam Vue, yang boleh mengekalkan keadaan dalam memori semasa penukaran komponen untuk mengelakkan pemaparan berulang DOM.

Penjelasan tapak web rasmi

7c9485ff8c3cba5ae9343ed63c2dc3f7Apabila membungkus komponen dinamik, tika komponen tidak aktif akan dicache dan bukannya memusnahkannya. Serupa dengan , ialah komponen abstrak: ia tidak menghasilkan elemen DOM dengan sendirinya, dan ia juga tidak muncul dalam rantaian komponen induk. Apabila komponen ditukar dalam , dua fungsi cangkuk kitaran hayatnya, diaktifkan dan dinyahaktifkan, akan dilaksanakan dengan sewajarnya. Dalam 2.2.0 dan lebih tinggi, diaktifkan dan dinyahaktifkan akan menyala pada semua komponen bersarang dalam pepohon. Terutamanya digunakan untuk mengekalkan keadaan komponen atau mengelakkan pemaparan semula.

Senario Aplikasi

Sebagai contoh, apabila membina sistem dengan fungsi menukar komponen, tag biasanya diletakkan dalam halaman indeks, ditambah dengan konfigurasi ibu bapa-anak bagi fail penghala Perhubungan komponen dan lompatan penghalaan membolehkan pemaparan komponen halaman. Tetapi kesannya ialah setiap kali komponen diklik, halaman akan dipaparkan semula dan data pada halaman tidak akan disimpan. Oleh itu, dengan menggunakan teg 7c9485ff8c3cba5ae9343ed63c2dc3f7 yang dibalut dengan teg 62fd61a4bda39e5f3eeccf86eb0f077c

Kod khusus

Tulis kod berikut pada halaman indeks

// 需要缓存的组件
<keep-alive v-if="showView">
    <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
// 不需要缓存的组件
<router-view v-if="!$route.meta.keepAlive"></router-view>

Cache komponen yang namanya test-keep-alive, di sini sertakan Untuk cache, kecualikan untuk bukan cache

// 将缓存name为test-keep-alive的组件
<keep-alive include="test-keep-alive">
  <component></component>
</keep-alive>
// 将缓存name为teat,teat2的组件
<keep-alive include="teat,teat2">
  <component></component>
</keep-alive>

Konfigurasikan kod berikut dalam fail penghala

// 需要缓存的组件
{
    path: '/Material',
    name: 'Material',
    aliasName: '物料信息',
    meta:{keepAlive: true}, // 是否缓存组件
    component: () => import('../components/Material/index.vue'),
},
{
    path: '/Unit',
    name: 'Unit',
    aliasName: '单位信息',
    component: () => import('../components/Unit/index.vue'),
}

Pembelajaran yang disyorkan: "tutorial video vue.js"

Atas ialah kandungan terperinci Apakah yang perlu saya lakukan jika menu vue tidak dimuat semula?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!