この記事をおすすめしたい人
- Node.jsも知らんのにNuxt.jsを始めようとしてる人
- Nuxt.jsでページを追加してリンクを貼る方法が知りたい人
- つまりオレ
前回の記事でようやくHTMLをちょろちょろっと触れるようになりました。
まだ右も左も全然分からないので、ここからはちょっとずつ探り探り勉強していきます。
今回はページの追加とリンクで悪戦苦闘する様をお届けします。
WordPressの上でな！
※ このブログはWordPress製です
ページを増やすには？
インストールフォルダにできた「pages」フォルダが各ページのデータです。
この中のREADMEに「vueファイル置けば後はこっちで勝手にやるよ！」みたいなことが書いてあったので、index.vueをコピペして「test.vue」を作ってみます。
保存するとコマンド画面で更新処理が入ります。
どうやってアクセスするんだ…？
URLに「/test/」足せばいいのか…？
できました。
めちゃくちゃ簡単です。
サブフォルダに置いてみた
解説サイトではよくサブフォルダを作ってページを追加しているので、同じようにやってみました。
「test」というフォルダを作って先ほどの「test.vue」を移動。 名前を「index.vue」に変更。
同じ「/test/」というURLで問題なく表示されました。
付属のファイルが増えてくるようだとサブフォルダで管理した方が便利そうですね。
増やしたページへリンクを貼るには？
普通にAタグを使ってみた
まずはHTMLのAタグでのリンク。
<a href="/test/">テストページへ</a>
問題なく動きます。
nuxt-linkを使ってみた
Nuxt.js専用の「nuxt-link」というタグがあるようなので使ってみました。
<nuxt-link to="/test/">テストページへ</nuxt-link>
もちろんちゃんと機能します。
nuxt-linkタグはほとんどAタグと同じようなもので、違いは「href」の代わりに「to」でURL指定することくらい。
Aタグで指定できるようなclass指定、title設定、「target=”_blank”」、「rel=”noopener”」なんかもAタグと同じように設定するだけで機能しています。
<nuxt-link to="/test/" class="red" target="_blank" rel="noopener">
それ以外にもnuxt-link専用の機能があるそうですが、これはおいおい。
ページ間の移動は？
Nuxt.jsの機能ではないですが、パスの指定方法。 Aでもnuxt-linkでも同じ挙動でした。
//トップページへ
<a href="/">
<nuxt-link to="/">
//テストページへ
<a href="/test/">
<nuxt-link to="/test/">
//今の階層からの相対URL
<a href="./test/">
<nuxt-link to="./test/">
//今の階層からのひとつ上の階層へ
<a href="../">
<nuxt-link to="../">
最近WordPressばっかりだったので、相対パスの指定方法をすっかり忘れていました…。
挙動が同じならnuxt-linkのメリットは？
リンク先のページを先読みしてくれるそうです。
デメリットは外部サイトへのリンクには使えない点。
まとめ
- pagesフォルダに「test.vue」を追加すれば「/test/」でアクセスできるようになるよ！
- pagesフォルダに「test」フォルダを作って中に「index.vue」を置いても同様！
- リンクにはHTMLのAタグ、Nuxt.js専用の「nuxt-link」タグを使えるよ！
- nuxt-linkタグはAタグと同じ書き方ができるよ！
- nuxt-linkタグはリンク先のページを先読みしてくれるよ！
以上、WordPressからお届けしました！
Nuxt.js ページ作成編の目次
- 第1回 index.vueをいじってみた
- 第2回 ページの追加とリンクの設定(このページ)
- 第3回 layoutsについて
- 第4回 componentsについて