vueのrouter-linkのまとめです。
目次
vue(nuxt)のrouter-linkで絶対パス(absolute path)
リンクは通常はこうです。
<router-link to="/">トップ</router-link>
応用編としてこうもかけます。vue.jsの洋書にのっていましたね。
<router-link :to="{ name: 'Home' }">ホーム画面</router-link>ヘッダーが共通のメニューなどで相対パスだけではurlが対応できなかったため、絶対パスにしました。外部リンクはまた別のやり方が紹介されていましたが、内部リンクはこちらでいけそうです。
この方法はbootstrapのボタンでもうまくいきますけど、ただのbuttonの場合はリンクの中に入れ子にしないと動きません。bootstrapにするとhover時に勝手に指定しますからどれを使うかは好みがわかれるかもしれません。
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>
ただ、queryの値を計算して終了待したのちに画面遷移したい場合は、html側はボタンで呼びだすだけにし、プログラムで書いた方がよいです。router-linkをthis.$router.pushに置き換えましょう。
this.$router.push({
path: `../result`,
query: { id: this.idvalue }
})
router-linkの疑問
router-linkでもbuttonでも画面遷移ができます。どちらでもやりたいことができます。
ただ、多少書くコードが違います。
@chickの呼び出し方が若干違います。
あとはボタンはborderなどCSSが勝手に指定されますので、次のような対応が必要です。
background: none;
border: none;bootstrapを使うとなおさらです(bootstrapのボタンはすぐ使わなくなりました)。
そして、丸いボタンなら丸いボタン用のCSSを別に書きます。
中央合わせの方法も異なります。
ただし、router-link(aタグ)には:disabledがないため、ボタンを無効化する場合はbuttonを使う方がよいっぽいです。
router-linkでもbuttonに同じCSSを適用させるとき、router-linkのみにstyle=”display: inline-block;”をしましょう。buttonにも“display: inline-block;したら、ちょっと困ったことになったことがあったので…。
ボタンの@click=”go”と@click=”go()” 括弧をつけるか否か
まじか知らなかった。とはいえ暗黙呼び出しは事故のもとなので使わないようにしたほうが良い気がする
【Vue】一体いつから括弧無しメソッドと括弧有りメソッドが同じだと錯覚していた？ https://t.co/88KQChIKNj #Qiita
— あんど (@ampersand_xyz) July 26, 2020
暗黙の呼び出しは使わず括弧をつけた方がいいですかね。
divでも@clickが指定可能?
たまたまそのようなソースコードを見かけたのですが、divでも@clickは呼び出せるようです。
<div class="modal-background" @click="cancel()"></div>ただし、CSSにcursor: pointer;が必要です。
cursor: pointer;VueXなしページ間移動なしに画面遷移(確認画面などの実装)
ページ間の移動をしてもいいのですけど、ものによってはデータのやりとり面倒なため、ひとつのページにまとめた方が管理しやすい場合もあります。
色々なやり方があるっぽいですけど、個人的にはv-showで表示切り替え(ボタンを押した時フラグ操作)が簡単な気がしました。なんちゃてですけど、これでうまくいきました。
他に参考になるものとしては、フォームの確認画面や画像のスライドショーなどを参考にするとよいかと。
演出つける場合はtransitionを参考に。
ご参考になれば幸いです。
コメント