Que dois-je faire si le menu vue ne s'actualise pas ?

La solution au menu vue ne s'actualise pas : 1. Écrivez "" sur la page d'index ; nom à « test-keep-alive » ; 3. Configurez « {chemin : '/Matériel', nom : 'Matériau'...}" dans le fichier du routeur.

L'environnement d'exploitation de ce tutoriel : système Windows 10, Vue version 3, ordinateur Dell G3.

Que dois-je faire si le menu vue ne s'actualise pas ?

vue réalise la page d'onglet de changement de composant (menu) sans actualiser la page

vue réalise la page d'onglet de changement de composant (menu) sans actualiser la page (garder en vie)

composant de Vue, qui peut conserver l'état en mémoire pendant le changement de composant pour empêcher le rendu répété du DOM.

Explication officielle du site Web

Lors de l'encapsulation de composants dynamiques, les instances de composants inactifs seront mises en cache au lieu de les détruire. Semblable à , est un composant abstrait : il ne restitue pas un élément DOM par lui-même et n'apparaît pas non plus dans la chaîne de composants parent. Lorsqu'un composant est commuté dans , ses deux fonctions de hook de cycle de vie, activées et désactivées, seront exécutées en conséquence. Dans la version 2.2.0 et versions ultérieures, les activations et désactivations se déclencheront sur tous les composants imbriqués dans l'arborescence. Principalement utilisé pour préserver l'état des composants ou éviter un nouveau rendu.

Scénarios d'application

Par exemple, lors de la construction d'un système avec la fonction de commutation de composants, des étiquettes sont généralement placées sur la page d'index, associées à la relation de composant parent-enfant configurée dans le fichier du routeur et aux sauts de routage, pour obtenir rendu des composants de la page. Mais cela a pour effet que chaque fois que vous cliquez sur le composant, la page sera restituée et les données de la page ne seront pas conservées. Par conséquent, en utilisant la balise enveloppée avec la balise , vous pouvez mettre en cache les composants inactifs et conserver les informations d'origine après leur retour.

Code spécifique

Écrivez le code suivant sur la page d'index

// 需要缓存的组件
<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>

Le nom du composant de cache est test-keep-alive L'inclusion ici est le cache et l'exclusion n'est pas le 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>

Configurez le code suivant dans le routeur. file

// 需要缓存的组件
{
    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'),
}

Apprentissage recommandé : "Tutoriel vidéo vue.js"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!