vue3 のルーティングは実行中は正常にジャンプできますが、ページが空白になり、更新ページが通常に戻ってしまいます。インターネットで長時間検索して、それが keepAlive の原因であると言いました。コード~
元のコード:
<template>
<div class="out-content">
...
</div>
<div ref="confirmModal">
...
</div>
</template>変更されたコード:
<template>
<div class="out-content">
<div ref="confirmModal">
...
</div>
</div>
</template>ルート要素は div でラップする必要があることがわかります。テンプレートが正常に表示されるようにするには、テンプレートに div が 1 つだけ含まれている必要があります~
原理：
ここでは、まず template タグについて見ていきます。このタグは HTML5 からの新しいタグで、次の 3 つの特徴があります。
非表示: ラベルはページ上のどこにも表示されません。コンテンツがどれほど多くても、ラベルは常に非表示になります。
任意: このタグは、head、body、sciprt タグ内も含め、ページ上のどこにでも書くことができます。
無効性: このタグ内の HTML コンテンツは無効であり、何の効果もありません。
ただし、innerHTML を通じて内部のコンテンツを取得できます。
これを理解した上で、.vue の単一ファイル コンポーネントを見てみましょう。実際、本質的に、単一ファイルのコンポーネントはさまざまなローダーによって .js ファイルに処理されることになります (単一ファイルのコンポーネントをインポートして出力する場合、それは Vue インスタンスであるため)。テンプレート。テンプレートによってラップされた HTML はどこにでも書くことができるため、.vue の場合、テンプレート内のコンテンツは vue によって仮想 dom として処理されてレンダリングされ、結果は最初に戻ります。 .vue 単一ファイル コンポーネントは vue インスタンスなので、このインスタンスのエントリはどこにあるのでしょうか?
テンプレートの下に複数の div がある場合、この vue インスタンスのルート エントリを指定するにはどうすればよいですか?
コンポーネントが正常に vue インスタンスを生成するために、この div はプログラムのエントリ ポイントとして自然に処理されます。
この **「ルート ノード」** を通じて、vue の「ツリー」全体の下にあるすべてのノードを再帰的に走査し、それらを vdom に処理し、最終的にそれらを実際の HTML にレンダリングして正しい位置に挿入します。
上記の内容が理解しにくいと思われる場合は、次の段落を見てください。よく説明されていると思います。
Vue インスタンスは、実際にはどれがエントリ ポイントで、どの部分を引き継ぐ必要があるのかを認識していないため、エントリ ポイントとして一意の要素を割り当てる必要があります。
各エントリは Vue クラスと見なすことができ、Vue はこのエントリで入力されたものをすべて取り出し、ラウンドロビン レンダリングを実行し、それをページ内の DOM に再マウントする必要があります。
たとえば、Vue インスタンスにはキーが 1 つしかなく、1 つのキーで開けられるロックは 1 つだけですが、ページ上には多数のロックがあり、どのロックであるかが分からないと、Vue インスタンスはそれを受け入れる方法がわかりません。 . ページが自然にレンダリングされないように次に何をすべきか~