vueのrouter-link属性の詳しい説明

vue の router-link 属性には次の属性値があります。to はジャンプ コンテンツを追加するための herf タグに相当し、replace はページ切り替え時に履歴記録を残さないために使用され、タグは router-link をWait

vue では、vue.js と vue-router を組み合わせて、単純な単一ページ アプリケーションを実装できます。このアプリケーションでは、 は主にナビゲーション リンクを設定するために使用されるコンポーネントです。異なる HTML コンテンツの切り替えを実現します。次に、この属性については記事内で詳しく紹介しますが、一定の参考価値があるので、皆さんの参考になれば幸いです。

#【おすすめコース: #Vue チュートリアル #】

router-link タグ##vue1.0 バージョンでもリンクジャンプ機能の実装には a タグが使用されていますが、リンクアドレスは html とは異なります。 v-link プロパティを使用して制御します。ただし、バージョン 2.0 では、a タグはround-link 属性に置き換えられましたが、ページに表示されるときは引き続き a タグとしてレンダリングされます。次に、この属性の各値の使い方を詳しく紹介します。

router-link 属性値の詳細説明

(1) ":to" 属性値

この属性値は a タグの "herf" 属性に相当し、次の内容はジャンプ リンクの内容です

<router-link :to="http://www.php.cn/">PHP中文网</router-link>

は

<a href="http://www.php.cn/">PHP中文网</a>

に相当します

(2)「replace」属性値

route-linkタグにreplace属性値を追加する主な目的は、ページ切り替え時に履歴を残すことではありません

<router-link :to="http://www.php.cn/" replace></router-link>

(3)「タグ」属性値

タグ属性を持つルーターリンクは、対応するタグにレンダリングされます

<router-link :to="/http://www.php.cn/" tag="li">PHP中文网</router-link>

<li>PHP中文网</li>

#と同等この時点でページ内の ##li これは、Vue が自動的にクリック イベントをそれにバインドし、ページ

(4) "active-class" にジャンプするため、タグの役割も果たします。 " 属性値

この属性は、リンクをアクティブにするときにクラス属性を設定するために使用されます。つまり、現在のページと、現在のページ アドレスに一致するすべてのリンクがクラス属性で追加されます。

<router-link :to="http://www.php.cn/" active-class="u-link--Active">PHP中文网</router-link>

active-class 属性のデフォルト値は router. -link-active なので、設定されていない場合はこのクラスとして表示されます

(5) "append " 属性値

append 属性を設定した後、現在の (相対) パスの前にベース パスを追加します。たとえば、/a から相対パス b に移動します。追加が構成されていない場合、パスは /b です。追加が構成されている場合、/a/b

<router-link :to="{ path: &#39;relative/path&#39;}" append></router-link>

代わりにルーターリンクを使用する利点タグの

router-link 属性は、ページ内の任意の要素としてレンダリングできます。たとえば、上記のコードの li タグでもジャンプ効果を実現できます。また、aタグをクリックするとページがリロードされる場合がありますが、router-linkを使用した後はこのタグがvueによって監視され、リンクが飛んでもページが更新されなくなります。

要約: 以上がこの記事の全内容です。皆様のお役に立てれば幸いです。

以上がvueのrouter-link属性の詳しい説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。