【Vue x Fisestore】ログイン後、ヘッダーからログイン者（認証済みユーザー）マイページへ遷移させたいです。

Question

#ログイン後、ヘッダーからログイン者（認証済みユーザー）マイページへ遷移させたいです。

新規登録（下記コード参照）する際にuidをfirestoreで取得してuidデータを格納しておりますが、
そのuidデータを元にログイン後もヘッダーから認証済みページへ遷移したいです。

※pathは、「/mypage/ (ログイン者のuid)」という形にする予定です。

現状、新規登録時に正常にuidが取得出来ておりfirestoreにデータとしてuidを格納できてる状況です。

　　signUp() {
      firebase
        .auth()
        .createUserWithEmailAndPassword(this.email, this.password)
        .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,
            });
        })
        .then(() => {
          this.$router.push(`/mypage/${this.uid}`);
        })

新規登録し、マイページにページ遷移後、プロフィール編集というボタンを設けているのですが、
そこでユーザー情報を入力して対象uidのusersコレクションにデータを追加・上書きができ、
更新ボタンを押したらマイページをリロードさせるようにしてます。

####マイページ

<ul class="list-item">
          <li class="list-items">性別：<div class="list-color">{{ profileData.sex }}</div></li>
          <li class="list-items">年齢：<div class="list-color">{{ profileData.age }}</div></li>
          <li class="list-items">職業：<div class="list-color">{{ profileData.profession }}</div></li>
          <li class="list-items">居住地：<div class="list-color">{{ profileData.access }}</div></li>
          <li class="list-items">好きな映画：<div class="list-color">{{ profileData.favMovie }}</div></li>
          <li class="list-items">好きなジャンル：<div class="list-color">{{ profileData.genre }}</div></li>
          <li class="list-items">自己紹介：<div class="list-color">{{ profileData.selfpr }}</div></li>
        </ul>

 updateBtn() {
      firebase
        .firestore()
        .collection("users")
        .doc(this.$route.params.uid)
        .set(
          {
            name: this.name,
            sex: this.sex,
            age: this.age,
            access: this.access,
            selfpr: this.selfpr,
            profession: this.profession,
            uploadedImage: this.uploadedImage,
            genre: this.genre,
            favMovie: this.favMovie,
            time: firebase.firestore.FieldValue.serverTimestamp(),
          },
          { merge: true }
          //set()でmergeをtrueにすると、上書き。updetaと同様。
        );
      this.$swal({
        title: "内容確認",
        text: "この内容で投稿しますか？",
        icon: "info",
        buttons: true,
        dangerMode: true,
      }).then((willDelete) => {
        if (willDelete) {
          this.$swal("投稿しました。", {
            icon: "success",
          });
          this.$router.go({ path: `/mypage/${this.$route.params.uid}`, force: true });
          //プロフィール編集されたらページをリロード
        } else {
          this.$swal("キャンセルしました。");
        }
      });
    },

下記のように記載して正常にリロードが出来てますが、
ログイン箇所で同じように記載しても新しく適当なidが付与されてページ遷移されてしまいます。

this.$router.go({ path: `/mypage/${this.$route.params.uid}`, force: true });

#※前置きが長くなってしまいましたが、ここからが本題です。

ヘッダー部では下記のように記載してますが、記載方法が誤ってるのか正常にページ遷移されません。。

 <router-link :to="`/mypage/${this.$route.params.uid}`" class="header-link neon3 flash">MYPAGE</router-link>

####ヘッダー

<script>
import firebase from "firebase";
import ClickOutside from "vue-click-outside";
export default {
  name: "signOut",
  data() {
    return {
      authenticatedUser: "",
      isOpen: false
    };
  },
  props: {
    profile: {
      type: Object,
    },
    index: {
      type: Number,
    },
  },
  methods: {
    //ログアウトを実装
    signOut() {
      firebase
        .auth()
        .signOut()
        .then(() => {
          this.$router.push("/signin");
        })
        .catch(() => {
        });
    },
    toggle() {
      this.isOpen = !this.isOpen;
    },
    clickoutside() {
      if (this.isOpen) {
        this.toggle();
      }
    }
  },
  mounted() {
    firebase.auth().onAuthStateChanged(user => {
      if (user) {
        this.authenticatedUser = true;
      } else {
        this.authenticatedUser = false;
      }
    });
    this.popupItem = this.$el;
  },
  directives: {
    ClickOutside
  }
};
</script>

####router

Vue.use(VueRouter);

const routes = [
  {
    path: "/mypage/:uid",
    name: "Mypage",
    component: Mypage,
    meta: { requiresAuth: true },
  },
];

どのように記載すれば正常に遷移されるのでしょうか。。

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

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

Answer 1

<li><router-link :to="`/mypage/${this.uid}`" class="header-link neon3 flash">MYPAGE</router-link></li>

  created() {
    const currentUser = firebase.auth().currentUser;

    this.uid = currentUser.uid;

    firebase
      .firestore()
      .collection("users")
      .doc(currentUser.uid)
      .get();
  },

こちらで解決できました。