Vue.jsの続きです。前回はNuxt.jsプロジェクトのTOPページのコードを読み解きました。今回は下層ページを作ってみたく。それではいきましょう！
【目次】
※参考：前回の記事
【Vue.js】Nuxt.jsのプロジェクトファイルを見てみる - クモのようにコツコツと
※参考：Vue.jsの習得のためにやったことまとめ
qiita.com
プロジェクト起動
今回も前回のプロジェクトから始める。一回閉じていたので前回の手順でプロジェクト起動する。
※参考：前回の記事
【Vue.js】Nuxt.jsのプロジェクトファイルを見てみる - クモのようにコツコツと
「私の邪悪なNuxt.jsプロジェクト」
前回の修正はそのまま残っている。
またお世話になっている書籍「Vue.js & Nuxt.js超入門」を参考に進める。
- 作者:掌田津耶乃
- 発売日: 2019/02/05
- メディア: 単行本
router-linkコンポーネントを追加
初期状態ではTOPページしかないので、他のページも作りたい。（書籍ではTOPページをもっと改造しているが過去にやったような内容なので割愛）
「pages/index.vue」を開いて、下記のように修正。
<template> <div class="container"> <div> <logo /> <h1 class="title"> nuxt_appへようこそ！ </h1> <h2 class="subtitle"> 私の邪悪なNuxt.jsプロジェクト </h2> <p><router-link to="/jaaku">邪悪なページを覗く</p> <div class="links"> <a href="https://nuxtjs.org/" target="_blank" class="button--green" > Documentation </a> <a href="https://github.com/nuxt/nuxt.js" target="_blank" class="button--grey" > GitHub </a> </div> </div> </div> </template>
h2タグの下にpタグを追加。中にはrouter-linkというコンポーネントを追加した。
router-linkってなんぞ？調べてみよう。
router-linkはVue Routerのコンポーネント
まずNuxt.js公式サイトを調べると…
<nuxt-link> は Nuxt の重要な要素です。あなたのアプリケーションを遷移するのに使われるべきコンポーネントで、従来の Vue アプリケーションにおける <router-link> と似ています。
※参考：API: <nuxt-link> コンポーネント - NuxtJS
ふむふむ。Nuxt.jsにはnuxt-linkというのがあると。router-linkはNuxe.jsではなくVue.jsのコンポーネントか？
Vue.js公式サイトを調べる。
v-link-active 置き換え
<router-link> コンポーネント でタグの指定が可能なため、 v-link-active ディレクティブは廃止されました。
※参考：Vue Router 0.7.x からの移行 — Vue.js
ほう、Vue.jsのv-linkを今後はrouter-linkに置き換えなさいと。で、そのrouter-linkはというと…？
Vue.jsではなく「Vue Router」のサイト内に情報があった！
<router-link> はルーターが使用可能になっているアプリケーションでユーザーのナビゲーションを有効にするためのコンポーネントです。
ふむ。ところででこの「Vue Router」ってなんぞ？
Vue Router は Vue.js 公式ルータです。これは Vue.js のコアと深く深く統合されており、Vue.js でシングルページアプリケーションを構築します。
※参考：紹介 | Vue Router
ここで思い出した！Vue RouterはNuxt.js内に構成されているんだった。過去の記事を見直す。
Nuxt.jsに組み込まれるライブラリ「Vue Router」を使うとルーティング管理ができるようになる。あらかじめ用意されたディレクトリの中に「.vue」拡張子のファイルを追加すると新たなページが生成できる。
※参考：【Vue.js】Nuxt.jsで何ができるのか調べた（SSR、ルーティング、静的ファイル生成など） - クモのようにコツコツと
router-linkはその中のコンポーネントで、Nuxt.jsにはそれと似たnuxt-linkというコンポーネントもあるよと。なるほど。
では次に進みます。
ブラウザ上で確認
もう一回router-linkコンポーネントのソースを見る。
<p><router-link to="/jaaku">邪悪なページを覗く</p>
タグの中はhref属性ではなくto属性になっており、そこにURLパスが書かれている。
ブラウザ上で確認すると該当部分にaタグが追加された！
デベロッパーツール上はこういうコードに変わっている。
<p><a href="/jaaku" class="">邪悪なページを覗く</a></p>
to属性がhref属性になった！
なお、この時点ではまだ別ページを作ってないため、リンクを押しても開かない。
こんな感じ。
「pages」フォルダに別ページを作る
別ページを作る。「pages」フォルダに「jaaku.vue」を作る。
Topページをベースにこんなコードにする。
<template> <div class="container"> <div> <logo /> <h1 class="title"> nuxt_appへようこそ！ </h1> <h2 class="subtitle"> 邪悪な下層ページへようこそ… </h2> <p><router-link to="/">Topページに戻る</router-link></p> <div class="links"> <!--中略（変更なし）--> </div> </div> </div> </template>
h2タグを「邪悪な下層ページへようこそ…」に書き換えrouter-linkコンポーネントのto属性を/にして「Topページに戻る」とする
さあどうだ？
下層ページでけた！「Topページに戻る」を押すとTopページに戻る。自由に往来ができるようになった！
ブラウザのデベロッパーツール 上ではaタグになっていた。
<p><a href="/" class="nuxt-link-active">Topページに戻る</a></p>
最後に
ということで、下層ページを作ってrouter-linkコンポーネントで往来できるようになりました！router-linkコンポーネントが初見で逆引きの旅をして、Vue Routerを再確認。ルート管理とはページ構成やページ往来の管理なんだなとイメージできた。
次回、URL上のパラメータを元にページを生成する、というのをやってみます。以前、Laravelの時にやったようなことがNuxt.jsでもできそうです。それではまた！
※参考：Vue.jsの習得のためにやったことまとめ
qiita.com
