Vue.jsの続きです。前回はNuxt.jsのプロジェクトでTopページと下層ページを往来しました。今回は$route.paramsと$route.queryを使ってパスやGETパラメータから動的にページを作ってみたく。それではいきましょう!
【目次】
- プロジェクト起動
- 書籍を参考に書いてみたがうまくいかず…(失敗例)
- _id.vueでパスからパラメーターを取得
- thisをつけてscriptタグで設定してみる
- 三項演算子で「名無し」を設定してみる
- $route.queryでGETパラメータの値を取得する
- 最後に
※参考:前回の記事
【Vue.js】Nuxt.jsプロジェクト router-linkで下層ページに往来 - クモのようにコツコツと
※参考:Vue.jsの習得のためにやったことまとめ
qiita.com
プロジェクト起動
プロジェクトを起動していない場合はこちらを参照
※参考:【Vue.js】Nuxt.jsのプロジェクトファイルを見てみる - クモのようにコツコツと
cd
コマンドでプロジェクトのフォルダに移動npm run dev
コマンドでプロジェクト起動
こちらのページを開くと
http://localhost:3000
よし、プロジェクトが起動した。
書籍を参考に書いてみたがうまくいかず…(失敗例)
例えばidとpassでURLを識別する設定画面みたいなものを作る場合。
idが「idr_zz」でpassが「abc123」の場合はこのようなURLにしたい。
http://○○.com/setting/idr_zz/abc123
今回も書籍「Vue.js & Nuxt.js超入門」を参考に進める。

- 作者:掌田津耶乃
- 発売日: 2019/02/05
- メディア: 単行本
フォルダとファイルを作成
プロジェクト上のフォルダ、ファイルはこのようになる。
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ページになった…
結局調べきれず、時間切れとなった…。*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
さあどうだ!
やた!表示された!
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を返す
さあどうだ!
よし、表示されている。
idを「taro」に打ち替えると…
http://localhost:3000/taro
文字も変わる!
三項演算子で「名無し」を設定してみる
今の状態だとidのパスが空欄だと
http://localhost:3000/
こんにちは「」さん、となる。
これを最初の例のように三項演算子を使って、空欄の場合には「名無し」と表示したい。打ち替えてみた。
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/
やた!「名無し」が表示された!
$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
こうなる。
GETパラメータに変更すると…
http://localhost:3000/?id=idr_zz
パラメータが表示された!
最後に
書籍の例を写経したらうまく行かなかったんですが、小さい要素から1行ずつ追加していったらうまく行きました。
やはり「急がば回れ」で、いきなり長いコードを写経するより、少しずつ書き足した方が1行ごとの理解度も深まり、結果的に良いと改めて感じました!
次回からは「状態管理」のVuexにトライ。状態管理とは何ぞや?何の状態をどう管理するのか。こちらもコツコツ調べていきたく。それではまた!
※参考:Vue.jsの習得のためにやったことまとめ
qiita.com
*1:私は平日は早朝にブログを書いているため、2〜3時間で終わらないと出勤時間で仕切り直しとなる。。