Vueのrouter-linkの使い方は何ですか？

1年 ago
綾乃, 一希
1 minute

Vueのrouter-linkは、ナビゲーション用のコンポーネントであり、アプリケーション内でリンクを生成し、リンクをクリックするとルートの遷移をトリガーできます。

router-linkの使い方は次の通りです：

  1. router-linkコンポーネントをインポートしてください。
import { RouterLink } from 'vue-router'
  1. router-linkコンポーネントをテンプレートに使用する。
<router-link to="/path">Link Text</router-link>

その中で、to属性はジャンプ先のパスを指定します。

  1. 具名ルートを使用してリダイレクトすることができます。
<router-link :to="{ name: 'routeName' }">Link Text</router-link>

name属性が指定されている、具名のルート名に移動する必要があります。

  1. propsを通じてルートパラメータを設定できます。
<router-link :to="{ name: 'routeName', params: { id: 1 }}">Link Text</router-link>

params属性により、渡す必要のあるルートパラメータが指定されます。

  1. 現在のルートを置き換える際には、新しい履歴を追加する代わりにreplace属性を設定できます。
<router-link to="/path" replace>Link Text</router-link>
  1. active-class属性を設定することで、CSSクラス名のアクティブ状態をカスタマイズすることができます。
<router-link to="/path" active-class="active">Link Text</router-link>

active-class属性は、アクティブな状態のCSSクラス名を指定します。

  1. exact属性を使用して、CSSクラス名が完全一致した場合のみアクティブ状態を適用することができます。
<router-link to="/path" exact>Link Text</router-link>

Vueのrouter-linkの基本的な使い方はこれです。ナビゲーションリンクを生成して、ルートの遷移をトリガーするために使用することができます。

bannerAds