【Vue × Firebase】新規登録時に取得したuidを元にマイページにページ遷移させたいです。

Question

#新規登録時に取得したuidを元にマイページにページ遷移させたいです。

現状、新規登録にてuidとuserName、時間を取得してFirestoreにデータを追加してます。

そこで取得したuidを元に各マイページにページ遷移するようにしたいのですが、
vueルーターとヘッダーにて今はパスを「/mypage」としています。

ここの記載をどのように記載してあげたら良いのか分からず困っております。

分かる方いらっしゃいましたらお力添えをいただきたいです。

よろしくお願いいたします。

#新規登録

<template>
  <div>
    <Header />
    <div class="signup flex">
      <div class="signup-inner flex">
        <h2>新規登録</h2>
        <input type="text" placeholder="Username" v-model="userName" />
        <input type="text" placeholder="Email" v-model="email" />
        <input type="password" placeholder="Password" v-model="password" />
        <button class="btn-signup" @click.prevent="signUp">登録</button>
        <p>
          既に登録済みの方は
          <router-link to="/signin">こちらへ</router-link>
        </p>
      </div>
    </div>
  </div>
</template>

export default {
  name: "Signup",
  data() {
    return {
      email: "",
      password: "",
      userName: "",
    };
  },
  components: {
    Header,
  },
  methods: {
    signUp() {
      firebase
        .auth()
        .createUserWithEmailAndPassword(this.email, this.password)
        .then((userCredential) => {
          this.$swal("登録に成功しました。", {
            icon: "success",
          });
          return firebase
            .firestore()
            .collection("users")
            .doc(userCredential.user.uid)
            .set({
              userName: this.userName,
              time: firebase.firestore.FieldValue.serverTimestamp(),
            });
        })
        .then(() => {
          this.$router.push("/signin");
        })
        .catch(() => {
          this.$swal("登録情報が正しくありません。", {
            icon: "error",
          });
        });
    },
};
</script>

新規登録にてuidとuserName、時間を取得してFirestoreにデータを追加してます。

#vueルーター

import Vue from "vue";
import VueRouter from "vue-router";
import Signup from "../views/signup.vue";
import Mypage from "../views/mypage.vue";
import firebase from "firebase";

Vue.use(VueRouter);

const routes = [

  {
    path: "/signup",
    name: "Signup",
    component: Signup,
  },
  {
    path: "/mypage",
    name: "Mypage",
    component: Mypage,
    meta: { requiresAuth: true },
  },

#ヘッダー

<template>
  <header class="header">
    <router-link to="/" class="header-ttl neon">
      <span class="header-ttl-color neon2">C</span>inema
    </router-link>
    <ul class="header-menu">
      <li>
        <router-link to="/mypage" class="header-link neon3 flash">MYPAGE</router-link>
      </li>
    </ul>
  </header>
</template>

#試してみた事

####vueルーター

import Vue from "vue";
import VueRouter from "vue-router";
import Signup from "../views/signup.vue";
import Mypage from "../views/mypage.vue";
import firebase from "firebase";

Vue.use(VueRouter);

const routes = [

  {
    path: "/signup",
    name: "Signup",
    component: Signup,
  },
  {
    path: "/mypage/:currentUser.uid.id",
    name: "Mypage",
    component: Mypage,
    meta: { requiresAuth: true },
  },

####ヘッダー

<template>
  <header class="header">
    <router-link to="/" class="header-ttl neon">
      <span class="header-ttl-color neon2">C</span>inema
    </router-link>
    <ul class="header-menu">
      <li>
        <router-link to="`/mypage/${currentUser.uid.id}`" class="header-link neon3 flash">MYPAGE</router-link>
      </li>
    </ul>
  </header>
</template>

Answer 1

 signUp() {
      firebase
        .auth()
        .createUserWithEmailAndPassword(this.email, this.password)
        //ユーザーから提供されたメールアドレスとパスワードを検証し、それらをcreateUserWithEmailAndPassword メソッドに渡す。
        .then((userCredential) => {
          this.$swal("登録に成功しました。", {
            icon: "success",
          });
          this.uid = userCredential.user.uid;
          return firebase
            .firestore()
            .collection("users")
            .doc(userCredential.user.uid)
            .set({
              name: this.name,
              time: firebase.firestore.FieldValue.serverTimestamp(),
              uid: userCredential.user.uid,
              //各マイページにページ遷移する為にuidをfirestoreに格納
            });
        })
        .then(() => {
          this.$router.push(`/mypage/${this.uid}`);
          //新規登録後、該当ページに遷移
        })

上記のようにすることで改善いたしました。