Vue Routerのrouter-linkを使わずにボタン押下で引数を渡して画面遷移する

Vue Routerによる画面遷移の情報がrouter-linkを使うものが多かったので備忘録。

下準備

Vue.jsでプロジェクトを作成したらVue Routerをインストールする。

npm install vue-router@4

Vue Routerによるルーティング先の登録用のJSファイルを作成する。これが画面遷移の案内板となる。

router.js

//Vue Routerを使うためにインポート。
import { createRouter, createWebHistory } from 'vue-router'
import MainPage from 'MainPageの場所'
import OtherPage from 'OtherPageの場所'

export const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      name: 'main',
      component: MainPage
      //引数のないコンポーネントは上記3つで十分。
    },
    {
      path: '/other',
      name: 'other',
      component: OtherPage,
      props: route => ({id: route.params.id, text: route.params.text})
      //引数がある場合はpropsを指定しておく。ここでは関数の書き方で引数を指定する。
    }
  ]
})

上記で作成した案内板をmain.jsで登録し、アプリケーション全体で利用できるようにする。
（余談だがVue.js 3ではまだbootstrap-vueが使えないので普通のBootstrapを使う。）

main.js

import { createApp } from 'vue'
import { router } from 'router.jsの場所' //上記で作ったrouterをインポート
import App from 'App.vueの場所'
import 'bootstrap/dist/css/bootstrap.css'

const app = createApp(App)
app.use(router) //routerをアプリケーション全体で使えるようにする
app.mount('#app')

最後に画面遷移で切り替えたい箇所にrouter-viewを書く。

App.vue

<template>
  <!-- ここでrouterに登録したコンポーネントが切り替わる-->
  <router-view></router-view>
</template>

<script>
export default {
  name: 'App'
}
//その他処理を記載
</script>

<style>
/* CSSを記載 */
</style>

これで下準備は完了。

---

ボタンに画面遷移の処理を追加

routerに登録したコンポーネントにボタンを追加し、ボタン押下時の画面遷移先と渡す引数を設定する。

MainPage.vue

<template>
  <button 
    type="button" 
    class="btn btn-primary" 
    @click="() => $router.push({ name: 'other', params: { id: userId, text: userText } })" >
    Button Name
  </button>
</template>

<script>
export default {
  name: 'MainPage',
  data() {
    return {
      userId: '12345',
      userText: 'this is other page'
    }
  }
}
</script>

<style>
/*CSSを記載*/
</style>

@click以下でボタン押下時のイベントを定義する。（@clickはv-on:clickでも可）
nameにはrouter.jsのnameに定義した名前を記載し、paramsにはrouter.jsのpropsで定義した通りに引数を記載する。
router.pushはparamsがない場合はpathを記載して遷移することも可能だが、paramsがある場合はnameでなければ警告が出て動作しないので注意しよう。

参考：paramsがない場合

<button
  type="button"
  class="btn btn-primary"
  @click="() => $router.push({ path: '/other' })">

あとは遷移先の画面でpropsを使って引数を受け取れば遷移は無事完了。

OtherPage.vue

<template>
  <div>
    <!-- 受け取った引数を表示 -->
    <div>{{ id }}</div>
    <div>{{ text }}</div>
  </div>
</template>

<script>
export default {
  name: 'OtherPage',
  props: {
    //ここで引数を受け取る
    id: String,
    text: String
  }
}
</script>

<style>
/*CSSを記載*/
</style>

---

参考

Vue Router公式
https://router.vuejs.org/guide/essentials/passing-props.html#passing-props-to-route-components
https://router.vuejs.org/guide/essentials/navigation.html#programmatic-navigation