プログラミング学習

【vue(nuxt)】router-linkでpath/query/propsなどページ遷移時のデータの受け渡し

プログラミング学習

vueのrouter-linkのまとめです。Nuxtを使っています。

体験談:個人開発におすすめで安いVPSサーバー!コスパよしXserver VPS!

nuxt(vue)でrouter-linkで絶対パス【基本】

リンクは通常はこうです。

<router-link to="/">トップ</router-link>

階層がある場合、フォルダも掘ればいいだけです。

<router-link :to="'/helps/Help'">Q&A</router-link>

応用編としてこうもかけます。vue.jsの洋書にのっていましたね。

<router-link :to="{ name: 'Home' }">ホーム</router-link>

ヘッダーが共通のメニューなどで相対パスだけではurlが対応できなかったため、絶対パスにしました。外部リンクはまた別のやり方が紹介されていましたが、内部リンクはこちらでいけそうです。

この方法はbootstrapのボタンでもうまくいきますけど、ただのbuttonの場合はリンクの中に入れ子にしないと動きません。bootstrapにするとhover時に勝手に指定しますからどれを使うかは好みがわかれるかもしれません。

スポンサーリンク

nuxtでページ遷移時のデータ受け渡し(引数渡し)

router-linkのnameとpath

const userId = '123'
router.push({ name: 'user', params: { userId } }) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123
// これは動作"しません"
router.push({ path: '/user', params: { userId } }) // -> /user

引用：https://router.vuejs.org/ja/guide/essentials/navigation.html

これは動作”しませんは、ついうっけりとやってしまいがち！

{{ $route.params.userID }}

階層を掘る場合はnameではなくpathを使います。paramsで引数を渡せます。

<router-link :to="{path: `user/${getData.id}`, params: { userID: getData.id }}">
  {{ getData.name }}
</router-link>

画面遷移先で次のような感じでテストするのもよいでしょう。

mounted() {
    console.log(this.$route)
    console.log(this.$route.params)
    console.log('this.$route.params.id', this.$route.params.id)
    console.log('this.$route.params.userId', this.$route.params.userId)
}

受け取る方は、mountedやcreatedでconsole.logでテストしましょう。this.$routeと全部構造がわかるため、一度確認するとよいです。

propsでパラメーターを渡す方法もあります。またオブジェクトを渡すならVuexがよいでしょう。さらにいうとParamsは画面遷移先で再読み込みすると値が消えるため、使い所が限られるでしょう。結局は再読み込み対策をしたVuexやFirebaseなどになっていく気がします。

VueRouter のページ遷移間でオブジェクトを受け渡す方法
teratail.com

router-linkにqueryでパラメーターを付加する

次のコードでリンク先に移動すると、result?id=hogeとなります。

@click.native=”do()”は何かJavascrpt側でコードを書きたいとき便利です。

<router-link :to="{ path: `../result`, query: { id: 'hoge' }}" @click.native="do()">結果</router-link>

ただ、クエリパラメータを計算して終了待したのちに画面遷移したい場合は、html側はボタンで呼びだすだけにし、プログラムで書いた方がよいです。router-linkをthis.$router.pushに置き換えましょう。

this.$router.push({
  path: `../result`,
  query: { id: this.idvalue }
})

nuxtでrouter(ルーティング)で複数のparamsをprops: true;で渡せない?

複数のパラメーターを渡したかったのですが、クエリーを使うと問題があるためprops: true;を使うことを検討しました。

こちらは厄介です。vueならうまくいきます。

詳しいやり方は世界のアオキさんのUdemy教材で紹介されていました。

【udemyで大人買い】vue.js/vuetify/nuxt/firebaseのおすすめ入門本/動画
ebookbrain.net
1user

しかし、nuxtはルーティングの仕様が違います。普段は自動生成されて楽チンなのですが、思わぬ落とし穴ですね。個人的にもやってみたのですが、うまくいきません。

.nuxt > router.js にprops: true;を反映されられません。。

だいたいの人はgithubの1つのスレッドにたどりつくはずです。

上記のアドレスにあるハックする方法は使いたくないため、少々面倒ですが、VueXになりますかね。。

スポンサーリンク

画面遷移router-linkとbuttonとdivの違い

router-linkでもbuttonでもdivでも画面遷移ができます。

ただ、多少書くコードが違います。

@chickの呼び出し方が若干違います。router-linkはJavaScriptを呼ぶとき、@click.native=”do()”です。

あとはボタンはborderなどCSSが勝手に指定されますので、次のような対応が必要です。

.btn {
  background: none;
  border: none;
}

bootstrapを使うとなおさらです(bootstrapのボタンはすぐ使わなくなりました)。

中央合わせの方法も異なります。

ただし、router-link(aタグ)には:disabledがないため、ボタンを無効化する場合はbuttonを使う方がよいっぽいです。

router-linkでもbuttonに同じCSSを適用させるとき、router-linkのみにstyle=”display: inline-block;”をしましょう。buttonにも“display: inline-block;したら、ちょっと困ったことになったことがあったので…。

divは余計なものがなくピュアな感じでできます。JavaScriptで処理を実行したのち画面遷移したい場合はこの方法がいい気がします。

<div class="btn" @click="toPage(user)">

toPage(user){
  this.$store.dispatch('user/addUser', user.id)
  this.$router.push(`../user/${user.userurl}`)
}

ただし、マウスオーバー時にアイコンが変わらないためCSSで調整します。

.btn {
  cursor: pointer;
}

モーダルウィンドウのキャンセルに利用しました。

<div class="modal-background" @click="cancel()"></div>

ボタンの@click=”go”と@click=”go()” 括弧をつけるか否か

暗黙の呼び出しは使わず括弧をつけた方がいいですかね。

スポンサーリンク

VueXなしページ間移動なしに画面遷移(確認画面などの実装)

ページ間の移動をしてもいいのですけど、ものによってはデータのやりとり面倒なため、ひとつのページにまとめた方が管理しやすい場合もあります。

色々なやり方があるっぽいですけど、個人的にはv-showで表示切り替え(ボタンを押した時フラグ操作)が簡単な気がしました。なんちゃてですけど、これでうまくいきました。

v-ifはfalseにすると、指定したタグのDOMオブジェクトを削除しますが、v-showは指定したタグにstyle=”display: none;”の属性を追加します。

他に参考になるものとしては、フォームの確認画面や画像のスライドショーなどを参考にするとよいかと。

演出つける場合はtransitionを参考に。

ご参考になれば幸いです。

コメント

タイトルとURLをコピーしました