クモのようにコツコツと

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

トップ > JS > 【Vue.js】$route.paramsと$route.queryでパスやGETパラメータから動的にページを作る

【Vue.js】$route.paramsと$route.queryでパスやGETパラメータから動的にページを作る

JS Vue.js

Vue.jsの続きです。前回はNuxt.jsのプロジェクトでTopページと下層ページを往来しました。今回は$route.paramsと$route.queryを使ってパスやGETパラメータから動的にページを作ってみたく。それではいきましょう！

【目次】

※参考：前回の記事
【Vue.js】Nuxt.jsプロジェクト router-linkで下層ページに往来 - クモのようにコツコツと

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

プロジェクト起動

プロジェクトを起動していない場合はこちらを参照

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

  • cdコマンドでプロジェクトのフォルダに移動
  • npm run devコマンドでプロジェクト起動

こちらのページを開くと

http://localhost:3000

よし、プロジェクトが起動した。

f:id:idr_zz:20191115050906j:plain

書籍を参考に書いてみたがうまくいかず…（失敗例）

例えばidとpassでURLを識別する設定画面みたいなものを作る場合。

idが「idr_zz」でpassが「abc123」の場合はこのようなURLにしたい。

http://○○.com/setting/idr_zz/abc123

今回も書籍「Vue.js & Nuxt.js超入門」を参考に進める。

Vue.js & Nuxt.js超入門

Vue.js & Nuxt.js超入門

フォルダとファイルを作成

プロジェクト上のフォルダ、ファイルはこのようになる。

pages/setting/_id/_pass.vue
  • 「pages」フォルダの中に「setting」フォルダを作る
  • 「setting」フォルダの中に「_id」フォルダを作る。
  • 「id」フォルダの中に「pass.vue」ファイルを作る。

このアンダースコア_がパラメータを利用していることを意味する。

_pass.vueにコードを書く

そのあと_pass.vueにこのようなコードを書く

<template>
    <section class="container">
        <h1>{{title}}</h1>
        <p v-html="message"></p>
        <ul class="menu">
            <li><router-link to="/">TOPへ戻る</router-link></li>
        </ul>
    </section>
</template>

<script>
export default {
    validate ({ params }) {
        if (params.id == undefined || params.pass == undefined) {
            return false;
        } else {
            return true;
        }
    },
    data: function () {
        return {
            title: 'アカウント設定',
        }
    },
    computed: {
        message: function() {
            let id = this.$route.params.id != undefined
                ? this.$route.params.id : 'IDがありません';
            let pass = this.$route.params.pass != undefined
                ? this.$route.params.pass : 'Passがありません';
            return 'ID: ' + id + '<br>PASS: ' + pass;
        }
    }
}
</script>
  • templateタグのh1の{{title}}とpタグのv-htmlのmessageを読み込む
  • exportのvalidateで値の有無をチェック
  • exportのdataでtitleの文字列設定
  • exportのcomputedでidとpassの値、または値がない時の文字列を設定（if文の三項演算子を使う）

三項演算子についてはこちらを参照

※参考：【Vue.js】localStorageと連携したTodoリストを読み解く（JS編-3） - クモのようにコツコツと

this.$route.params.idでidが$route.params.passでpass.vueが読み込まれるはすが…

自分の環境ではこれをやると「チカチカチカチカ！」と眩いスピードでページがリロードしまくって、うまく動かなかった。。

書籍と何度見返してもスペルミスなどはなさそう。書籍のサンプルコードを入手して同じようにファイルを配置してみたが、そちらもチカチカする。

※参考：Vue.js&Nuxt.js超入門｜サポート｜秀和システム

現象やエラーの原因、対策などを調べていたが、いろいろ打ち替えているうちに最終的に404ページになった…

f:id:idr_zz:20191127045957j:plain

結局調べきれず、時間切れとなった…。*1

_id.vueでパスからパラメーターを取得

ということで仕切り直し。もっとシンプルな方法に変更しよう。

マイページで「こんにちは○○さん！」と自分のアカウント名をページ上に表示するイメージにしたい。

まずはフォルダとファイルを作る。

pages/mypage/_id.vue
  • pagesフォルダの中にmypageフォルダを作り、その中に_id.vueを作る

_id.vueの部分のパスを拾いたい。

_id.vueにコードを書く。こちらの記事が参考になった！

※参考：Nuxt.jsでURLからパラメーターを取得する - Qiita

<template>
  <section>
    <h1>マイページ</h1>
    <p>こんにちは、「{{ $route.params.id }}」さん！</p>
  </section>
</template>

<style>
section {
  border: 1px solid #ccc;
  border-radius: 10px;
  max-width: 600px;
  padding: 30px; 
  margin: 20px auto;
}
</style>
  • $route.params.idの部分で_id.vueのパスを読み込む
  • styleタグでスタイルも設定

idが「idr_zz」だと仮定してこのパスでページを開いてみる

http://localhost:3000/idr_zz

さあどうだ！

f:id:idr_zz:20191127051025j:plain

やた！表示された！

thisをつけてscriptタグで設定してみる

先ほどはhtml部分に直書きしていたので今度はthisをつけてscriptタグで設定してみる。最初の書籍の例を参考にしながらこのように書き換えた。

<template>
  <section>
    <h1>マイページ</h1>
    <p>こんにちは、「{{ id }}」さん！</p>
  </section>
</template>

<script>
export default {
  computed: {
    id: function () {
    return this.$route.params.id;
    }
  }
}
</script>
  • pタグは{{ id }}にする
  • scriptタグにexport defaultを設定
  • computed（算出プロパティ）にidを設定
  • idにthis.$route.params.idを返す

さあどうだ！

f:id:idr_zz:20191127051025j:plain

よし、表示されている。

idを「taro」に打ち替えると…

http://localhost:3000/taro

文字も変わる！ f:id:idr_zz:20191127054708j:plain

三項演算子で「名無し」を設定してみる

今の状態だとidのパスが空欄だと

http://localhost:3000/

f:id:idr_zz:20191127055006j:plain

こんにちは「」さん、となる。

これを最初の例のように三項演算子を使って、空欄の場合には「名無し」と表示したい。打ち替えてみた。

export default {
  computed: {
    id: function () {
     let id = this.$route.params.id != undefined
       ? this.$route.params.id : '名無し';
    return id;
    }
  }
}
  • 変数idに三項演算子で$route.params.idの値の有無をチェック
  • 値があれば$route.params.id、なければ「ななし」
  • 変数idを返す

さあどうだ？

http://localhost:3000/

やた！「名無し」が表示された！ f:id:idr_zz:20191127055357j:plain

$route.queryでGETパラメータの値を取得する

最後に、$route.queryを使ってパラメータを表示する。

パラメータとはURLの末尾に追記されている「?hoge=fuga」みたいなやつ。

※参考：【JS】フォームのinputタグにURLパラメータを渡す方法 - クモのようにコツコツと

先ほど記事によると$route.params.idを$route.queryに変えればいいようだ。

※参考：Nuxt.jsでURLからパラメーターを取得する - Qiita

export default {
  computed: {
    id: function () {
     //this.$route.params.idを打ち替え
     let id = this.$route.query.id != undefined
       ? this.$route.query.id : '名無し';
    return id;
    }
  }
}

この状態では

http://localhost:3000/

でも

http://localhost:3000/idr_zz

こうなる。 f:id:idr_zz:20191127055357j:plain

GETパラメータに変更すると…

http://localhost:3000/?id=idr_zz

パラメータが表示された！ f:id:idr_zz:20191127051025j:plain

最後に

書籍の例を写経したらうまく行かなかったんですが、小さい要素から1行ずつ追加していったらうまく行きました。

やはり「急がば回れ」で、いきなり長いコードを写経するより、少しずつ書き足した方が1行ごとの理解度も深まり、結果的に良いと改めて感じました！

次回からは「状態管理」のVuexにトライ。状態管理とは何ぞや？何の状態をどう管理するのか。こちらもコツコツ調べていきたく。それではまた！

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

*1:私は平日は早朝にブログを書いているため、2〜3時間で終わらないと出勤時間で仕切り直しとなる。。