Vue Routerでページ遷移後にトーストを表示させる方法

Vue Routerを使ってページ遷移をしているとき、ページ遷移後のページで何かしらトーストを表示させたいときに、ページ遷移前のボタンで内容を指定できるようにする方法はないか試してみました。

非常に簡易的な作りなのですが、Vue Routerでページ遷移時にデータも一緒に持ってくるサンプルとしてご覧ください。

トースト用のコンポーネント作成

まずはトースト用のコンポーネントを作成します。
（今回はVue3.0のComposition APIを使用）

とはいっても中身はテキストを表示するだけなのと、トースト内のテキストが入ったタイミングで表示されるようにしているので、propsはテキスト1つのみになります。

<template>
  <transition name="toast">
    <div class="toast" v-show="state.show">
      {{text}}
    </div>
  </transition>
</template>

<script>
import { defineComponent, reactive, onMounted } from "vue";
export default defineComponent({
  name: 'Toast',
  props: {
    text: {
      type: String,
    },
  },
  setup(props) {
    // data
    let state = reactive({
      show: false,
    });
    onMounted(() => {
      if(props.text){
        state.show = true
      }
      // 3秒後に自動で閉じるようにする
      setTimeout(() => {
        state.show = false
      }, 3000)
    });
    return {
      state,
    }
  },
});
</script>

Vue Routerでテキストを一緒に送信する

次に、遷移前のページから<router-link>で遷移させるときに、to属性ではなく:to属性を使用し、paramsオブジェクトを使ってトースター用のメッセージを追加します。

<router-link :to="{name: 'トーストを設置したページ', params: {toastText: '更新が完了しました'}}">更新</router-link>

paramsの他にもクエリの指定もできるようです。

トーストの設置

あとは、トーストを設置したい場所にトーストのコンポーネントを設置します。

設置時には先ほど遷移前のページで指定した値を、$route.params.toastTextでpropsのtextに入れてあげます。

<toast :text="$route.params.toastText"></toast>

この指定をすることで、遷移後にトースト内にテキストが入り、トーストが表示されるようになります。

その他のカスタマイズ

今回はかなりシンプルな作りにしましたが、渡すデータにstatusとかを追加して、「成功時」「エラー時」みたいな分岐を付けるのもできそうです。