vue メニューが更新されない場合はどうすればよいですか?

vue メニューが更新されない場合の解決策: 1. インデックス ページに「」と書き込みます。 2. キャッシュ名を「test-keep-alive」に設定します; 3. ルーター ファイルで「{path: '/マテリアル',name: 'マテリアル'...}」を設定します。

#このチュートリアルの動作環境: Windows 10 システム、Vue バージョン 3、Dell G3 コンピューター。

vue メニューが更新されない場合はどうすればよいですか?

vue はページを更新せずにコンポーネント切り替えタブ (メニュー) ページを実装します

vue はページを更新せずにコンポーネント切り替えタブ (メニュー) ページを実装します (キープアライブ) )

は Vue の組み込みコンポーネントであり、コンポーネントの切り替え中に状態をメモリに保持して、DOM の繰り返しレンダリングを防ぐことができます。

公式サイトの説明

動的コンポーネントをラップするとき、非アクティブなコンポーネントのインスタンスは破棄されずにキャッシュされます。と同様に、抽象コンポーネントは、それ自体では DOM 要素をレンダリングせず、親コンポーネント チェーンにも表示されません。コンポーネントが 内で切り替えられると、そのコンポーネントの 2 つのライフサイクル フック関数 (アクティブ化および非アクティブ化) がそれに応じて実行されます。 2.2.0 以降では、アクティブ化および非アクティブ化は、ツリー内のすべてのネストされたコンポーネントに対して起動されます。主にコンポーネントの状態を保存したり、再レンダリングを回避したりするために使用されます。

アプリケーションシナリオ

たとえば、コンポーネントを切り替える機能を備えたシステムを構築する場合、通常はインデックスページにラベルを配置し、さらにその親子構成を追加します。ルーター ファイル コンポーネントの関係とルーティング ジャンプにより、ページのコンポーネント レンダリングが可能になります。ただし、この結果、コンポーネントがクリックされるたびにページが再レンダリングされ、ページ上のデータが保持されなくなります。したがって、 タグを タグでラップして使用すると、非アクティブなコンポーネントをキャッシュし、戻った後も元の情報を保持できます。

特定のコード

インデックス ページに次のコードを記述します

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

キャッシュ コンポーネント名はコンポーネント test-keep-alive で、 include here はキャッシュです。exclude はキャッシュされません

// 将缓存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>

ルーター ファイルに次のコードを設定します

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

推奨される学習: 「vue.js ビデオ チュートリアル 」

以上がvue メニューが更新されない場合はどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。