router-linkでpath/queryなどパラメーター追加【vue(nuxt)】

おすすめのオンラインプログラミング学習

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などになっていく気がします。

TypeScript - VueRouter のページ遷移間でオブジェクトを受け渡す方法|teratail
概要TypeScript+Vue.jsで画面を作成しています。Vue.jsのバージョンは2.6.11です。 画面間の遷移にVueRouterを使っているのですが、理解が不足していてやりたいことができずに

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の違い

router-linkでもbuttonでも画面遷移ができます。どちらでもやりたいことができます。

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

@chickの呼び出し方が若干違います。

あとはボタンはborderなどCSSが勝手に指定されますので対応が必要です。bootstrapを使うとなおさらです(bootstrapのボタンはすぐ使わなくなりました)。

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

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

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

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

スポンサーリンク

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

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

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

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

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

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

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

コメント

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