vueのrouter-linkのまとめです。Nuxtを使っています。
Contents
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などになっていく気がします。
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ならうまくいきます。
別の方からも同様の指摘を頂きました。props:trueにした上で試してみます！ ありがとうございます🙇♂️
— バイキルト増田 (@yameteyou) June 19, 2019
詳しいやり方は世界のアオキさんのUdemy教材で紹介されていました。
しかし、nuxtはルーティングの仕様が違います。普段は自動生成されて楽チンなのですが、思わぬ落とし穴ですね。個人的にもやってみたのですが、うまくいきません。
.nuxt > router.js にprops: true;を反映されられません。。
だいたいの人はgithubの1つのスレッドにたどりつくはずです。
nuxtでvue-routerにpropsオプションつける方法はなさそう
— darai0512 (@darai_0512) October 28, 2019
Vuexのstoreでやれって結論ぽいhttps://t.co/o9rWAa4LWj
編集ボタンを押してマイページに遷移する時、apolloのfetchPolicyに’network-only’を渡したかったのだけど、、
上記のアドレスにあるハックする方法は使いたくないため、少々面倒ですが、VueXになりますかね。。
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()” 括弧をつけるか否か
まじか知らなかった。とはいえ暗黙呼び出しは事故のもとなので使わないようにしたほうが良い気がする
【Vue】一体いつから括弧無しメソッドと括弧有りメソッドが同じだと錯覚していた？ https://t.co/88KQChIKNj #Qiita
— あんど (@ampersand_xyz) July 26, 2020
暗黙の呼び出しは使わず括弧をつけた方がいいですかね。
VueXなしページ間移動なしに画面遷移(確認画面などの実装)
ページ間の移動をしてもいいのですけど、ものによってはデータのやりとり面倒なため、ひとつのページにまとめた方が管理しやすい場合もあります。
色々なやり方があるっぽいですけど、個人的にはv-showで表示切り替え(ボタンを押した時フラグ操作)が簡単な気がしました。なんちゃてですけど、これでうまくいきました。
他に参考になるものとしては、フォームの確認画面や画像のスライドショーなどを参考にするとよいかと。
演出つける場合はtransitionを参考に。
ご参考になれば幸いです。
コメント