vue-routerにて、プログラムで遷移先にプロパティを渡す方法

vue-routerにてプロパティを遷移先に渡したい

まずはvue-routerの設定

export default new Router ({
  routes: [
    {
      path: '/register',
      name: 'register',
      component: CreateUser,
    },
    {
      path: '/register-result',
      name: 'register-result',
      component: ResultOfCreateUser,
      props: true,
    },
  ],
});

このようなものを想定します。
ユーザー登録をして、その結果の画面に遷移するような感じです

遷移先の画面の設定

<template>
  <div>
    The result for user creation.
    <div>
      user: {{user}}
    </div>
    <div>
      email: {{email}}
    </div>
    <div>
      password: {{password}}
    </div>
  </div>
</template>

<script>
export default {
  props: {
    user: {
      required: true,
      type: String
    },
    email: {
      required: true,
      type: String
    },
    password: {
      required: true,
      type: String
    },
  },
};
</script>

このようにpropsを設定していたとして、ユーザー登録画面で登録ボタンなどがクリックされたときに遷移させたいとします。

遷移するプログラム

        <button
          type="button"
          v-on:click="submit"
        >login</button>

ボタンをクリックしたらsubmitというメソッドが呼ばれるようにテンプレートを設定
そしてsubmitの実装が以下。

    submit() {
            this.$router.push({
              name: "register-result",
              params: {
                user: user.name,
                email: user.email,
                role: user.role,
                password: this.password
              };
    }

このようにparamsとして任意のデータを渡してやればpropsに届きます。