router-linkの実装
| コンポーネント | 説明 |
|---|---|
| <router-view> | 「<router-link>」でマッチしたコンポーネントを描画する。描画するコンポーネントはroutesにて登録したものをURLを見て決めます。（コンポーネントを切り替える動的コンポーネントのような動きをします。） |
| <router-link> | ルートのリンクを作成します。ここでマッチしたコンポーネントを、「<router-view>」に埋め込みます。普通にaタグを使っても同じようにページを切り替えることは可能なのですが、aタグでは毎回サーバーにリクエストを行ってしまいます。router-linkを使うことでサーバーにリクエストを行わずVue.js側でページを切り替える処理を行いSPAを実現する事が可能です。 |
実装例
URL1というリンクをクリックしたらVue Routerに登録したURLの内容が「router-view」に描画されます。
|
1 2 3 4 5 |
<div id="app"> <router-link to="/url1">URL1</router-link> <router-link to="/url2">URL2</router-link> <router-view></router-view> </div> |
router-linkの属性
| 属性名 | 説明 |
|---|---|
| to | ルーティング先のページ（コンポーネント）を指定します。 |
| active-class | アクセスしたURLにtoで指定したルーティングを含んでいる場合にCSSクラスを適用します。（例えば、toに「/」を指定した場合は「/」でアクセスしても「/content」にアクセスしてもそのクラスが適用されます。） |
| exact | active-class単体で使用した場合はtoで指定したURLを含んでいる場合でしたが、exactを指定する事でtoに一致する場合にactive-classを適用するというようにできます。 |
to属性を動的に記述する。
下記のように記述する事でURLを動的にカウントアップさせる事ができます。内部的にはディレクティブのv-bindを使用しています。
|
1 2 3 |
<router-link :to="'/content/' +(Number(id) + 1)" >リンク名</router-link> |
この記事へのコメントはありません。