クモのようにコツコツと

フロントエンドエンジニア イイダリョウのブログ。略称「クモコツ」

【Vue.js】Nuxt.jsプロジェクト router-linkで下層ページに往来

Vue.jsの続きです。前回はNuxt.jsプロジェクトのTOPページのコードを読み解きました。今回は下層ページを作ってみたく。それではいきましょう!

【目次】

※参考:前回の記事
【Vue.js】Nuxt.jsのプロジェクトファイルを見てみる - クモのようにコツコツと

※参考:Vue.jsの習得のためにやったことまとめ
qiita.com

プロジェクト起動

今回も前回のプロジェクトから始める。一回閉じていたので前回の手順でプロジェクト起動する。

※参考:前回の記事
【Vue.js】Nuxt.jsのプロジェクトファイルを見てみる - クモのようにコツコツと

f:id:idr_zz:20191112055318j:plain

「私の邪悪なNuxt.jsプロジェクト」

前回の修正はそのまま残っている。

またお世話になっている書籍「Vue.js & Nuxt.js超入門」を参考に進める。

Vue.js & Nuxt.js超入門

Vue.js & Nuxt.js超入門

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> はルーターが使用可能になっているアプリケーションでユーザーのナビゲーションを有効にするためのコンポーネントです。

※参考:API リファレンス | Vue Router

ふむ。ところででこの「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タグが追加された!

f:id:idr_zz:20191115050906j:plain

デベロッパーツール上はこういうコードに変わっている。

<p><a href="/jaaku" class="">邪悪なページを覗く</a></p>

to属性がhref属性になった!

なお、この時点ではまだ別ページを作ってないため、リンクを押しても開かない。

こんな感じ。

f:id:idr_zz:20191115052159j:plain

「pages」フォルダに別ページを作る

別ページを作る。「pages」フォルダに「jaaku.vue」を作る。

f:id:idr_zz:20191115055309j:plain

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ページに戻る」とする

さあどうだ?

f:id:idr_zz:20191115053605j:plain

下層ページでけた!「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