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 属性値の詳細説明

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

<router-link :to="//m.sbmmt.com/">PHP中文网</router-link>

は

<a href="//m.sbmmt.com/">PHP中文网</a>

に相当します

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

<router-link :to="//m.sbmmt.com/" replace></router-link>

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

<router-link :to="///m.sbmmt.com/" tag="li">PHP中文网</router-link>

<li>PHP中文网</li>

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

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

<router-link :to="//m.sbmmt.com/" active-class="u-link--Active">PHP中文网</router-link>

(5) "append " 属性値

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

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

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