」と書き込みます。2. キャッシュ名を「test」に設定します。 -keep-alive"; 3. ルーターファイルに「{path: '/マテリアル',name: 'マテリアル'...}」を設定します。"/> 」と書き込みます。2. キャッシュ名を「test」に設定します。 -keep-alive"; 3. ルーターファイルに「{path: '/マテリアル',name: 'マテリアル'...}」を設定します。">
ホームページ >ウェブフロントエンド >Vue.js >vue メニューが更新されない場合はどうすればよいですか?
vue メニューが更新されない場合の解決策: 1. インデックス ページに「99df3d3b411e1be071f4ada3d31f1e18dd6e4ababe59793a4ac75fb9e5c5550e」と書き込みます。 2. キャッシュ名を「test-keep-alive」に設定します; 3. ルーター ファイルで「{path: '/マテリアル',name: 'マテリアル'...}」を設定します。
#このチュートリアルの動作環境: Windows 10 システム、Vue バージョン 3、Dell G3 コンピューター。
vue メニューが更新されない場合はどうすればよいですか?
vue はページを更新せずにコンポーネント切り替えタブ (メニュー) ページを実装します
vue はページを更新せずにコンポーネント切り替えタブ (メニュー) ページを実装します (キープアライブ) )
7c9485ff8c3cba5ae9343ed63c2dc3f7 は Vue の組み込みコンポーネントであり、コンポーネントの切り替え中に状態をメモリに保持して、DOM の繰り返しレンダリングを防ぐことができます。
公式サイトの説明
7c9485ff8c3cba5ae9343ed63c2dc3f7動的コンポーネントをラップするとき、非アクティブなコンポーネントのインスタンスは破棄されずにキャッシュされます。と同様に、抽象コンポーネントは、それ自体では DOM 要素をレンダリングせず、親コンポーネント チェーンにも表示されません。コンポーネントが 内で切り替えられると、そのコンポーネントの 2 つのライフサイクル フック関数 (アクティブ化および非アクティブ化) がそれに応じて実行されます。 2.2.0 以降では、アクティブ化および非アクティブ化は、ツリー内のすべてのネストされたコンポーネントに対して起動されます。主にコンポーネントの状態を保存したり、再レンダリングを回避したりするために使用されます。
アプリケーションシナリオ
たとえば、コンポーネントを切り替える機能を備えたシステムを構築する場合、通常はインデックスページにラベルを配置し、さらにその親子構成を追加します。ルーター ファイル コンポーネントの関係とルーティング ジャンプにより、ページのコンポーネント レンダリングが可能になります。ただし、この結果、コンポーネントがクリックされるたびにページが再レンダリングされ、ページ上のデータが保持されなくなります。したがって、7c9485ff8c3cba5ae9343ed63c2dc3f7 タグを 62fd61a4bda39e5f3eeccf86eb0f077c タグでラップして使用すると、非アクティブなコンポーネントをキャッシュし、戻った後も元の情報を保持できます。
特定のコード
インデックス ページに次のコードを記述します
// 需要缓存的组件 <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 サイトの他の関連記事を参照してください。