ボタンを発火させた際、認証ユーザーページをリロードさせる
mypage.vue
<button @click="updateBtn" class="update-btn flex">更新</button>
mypage.vue
<script>
import firebase from "firebase";
import Header from "@/components/header.vue";
import Vue from "vue";
~ 省略 ~
methods: {
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 }
);
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("キャンセルしました。");
}
});
},
~ 省略 ~
</script>
updateBtn()が押下されたらページをリロードさせるようにしてますが、
動的ルートマッチング「this.$route.params」について
上記記事でも書かせて頂いたように、this.$route.params.uidで現在のURLのパラメータを取得して
単純に/mypage/${this.$route.params.uidという形式でリロードをさせてます。
router.js
{
path: "/mypage/:uid",
name: "Mypage",
component: Mypage,
meta: { requiresAuth: true },
},
mypage.vue
this.$router.go({path: `/mypage/${this.$route.params.uid}`,force: true,});