【 Vue x Firebase】パラメーター変更の検知(WatchまたはbeforeRouteUpdate)を使用したいがどのように記述したらいいのか分からない

Question

現状、「自身のマイページ」から「他のユーザーのマイページ」へページ遷移をするとそのユーザーのページへ遷移できるのですが、「他のユーザーのマイページ」へ遷移後、再び「自身のマイページ」へ戻ろうとすると【/mypage/（自身のuid）】となって、しっかりと自身のまページは遷移できていることが確認できますが、画面上ではページ遷移前の情報が残ったままになってしまっております。

◆自身のマイページ

◆他のユーザーのマイページ

◆ページ遷移後

 <router-link
        :to="`/mypage/${this.uid}`"
        class="hamburger-link neon3 flash"
        v-if="authenticatedUser"
      >MYPAGE</router-link>

手動でリロードすると改善されますが、再び自身のマイページへ戻った際にはしっかりと変更検知されるようにしたいです。

公式リファレンスにあるパラメーター変更の検知によると「同両方のルートが同じコンポーネントを描画した場合、古いインスタンスを再利用されることが原因のようです。」同じコンポーネントでパラメーター変更を検知するためには、 $route オブジェクトを watch すればいいとのことですがどこにどのように記述したらいいのか分からない状況です・・・。

const User = {
  template: '...',
  watch: {
    $route(to, from) {
      // ルートの変更の検知...
    }
  }
}

分かる方いらっしゃいましたらお力添えをいただけませんでしょうか。

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

#header.vue

<slide right disableOutsideClick width="200" class="hamburger-menu">
      <router-link to="/" class="hamburger-link neon3 flash home-link">HOME</router-link>
      <router-link to="/about" class="hamburger-link neon3 flash">ABOUT</router-link>
      <router-link
        :to="`/board/${this.uid}`"
        class="hamburger-link neon3 flash"
        v-if="authenticatedUser"
      >POST</router-link>
      <router-link to="/board" class="hamburger-link neon3 flash" v-if="!authenticatedUser">POST</router-link>

      <router-link to="/signup" class="hamburger-link neon3 flash" v-if="!authenticatedUser">SINGUP</router-link>
      <router-link to="/signin" class="hamburger-link neon3 flash" v-if="!authenticatedUser">SINGIN</router-link>
      <router-link
        :to="`/mypage/${this.uid}`"
        class="hamburger-link neon3 flash"
        v-if="authenticatedUser"
      >MYPAGE</router-link>
      <router-link to="/mypage" class="hamburger-link neon3 flash" v-if="!authenticatedUser">MYPAGE</router-link>
      <button class="hamburger-link neon3 flash" @click="signOut" v-if="authenticatedUser">SINGOUT</button>
    </slide>

<script>
import firebase from "firebase";
import Vue from "vue";
import { Slide } from "vue-burger-menu";
Vue.component("slide", Slide);

export default {
  name: "signOut",
  data() {
    return {
      authenticatedUser: "",
      uid: null
    };
  },
  methods: {
    signOut() {
      firebase
        .auth()
        .signOut()
        .then(() => {
          this.$router.push("/signin");
        })
        .catch(() => {
          this.$swal("ログアウト出来ませんでした。", {
            icon: "error"
          });
        });
    }
  },
  mounted() {
    firebase.auth().onAuthStateChanged(user => {
      if (user) {
        this.authenticatedUser = true;

        const currentUser = firebase.auth().currentUser;
        this.uid = currentUser.uid;
      } else {
        this.authenticatedUser = false;
      }
    });
  }
};
</script>

#router.vue

import Vue from "vue";
import VueRouter from "vue-router";
import Main from "../views/main.vue";
import Signin from "../views/signin.vue";
import Signup from "../views/signup.vue";
import About from "../views/about.vue";
import Mypage from "../views/mypage.vue";
import Board from "../views/board.vue";
import Chat from "../components/chat.vue";
import Bookmark from "../components/bookmark.vue";
import firebase from "firebase";

Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    name: "Main",
    component: Main,
  },
  {
    path: "/signin",
    name: "Signin",
    component: Signin,
  },
  {
    path: "/signup",
    name: "Signup",
    component: Signup,
  },
  {
    path: "/about",
    name: "About",
    component: About,
  },
  {
    path: "/mypage/:uid",
    name: "Mypage",
    component: Mypage,
    meta: { requiresAuth: true },
    //このルートは認証が必要であることの状態をもたせている。
  },
  {
    path: "/mypage",
    name: "Mypage",
    component: Mypage,
    meta: { requiresAuth: true },
    //このルートは認証が必要であることの状態をもたせている。
  },
  {
    path: "/board/:uid",
    name: "Board",
    component: Board,
  },
  {
    path: "/board",
    name: "Board",
    component: Board,
  },
  {
    path: "/chat/:id",
    ///「:id」とすることで、Firestoreで取得した「id」先へページ遷移できる。
    name: "Chat",
    component: Chat,
    meta: { requiresAuth: true },
  },
  {
    path: "/bookmark/:uid",
    name: "Bookmark",
    component: Bookmark,
  },
];

const scrollBehavior = (to, from, savedPosition) => {
  if (savedPosition) {
    return savedPosition;
  } else {
    return { x: 0, y: 0 };
  }
  //位置を指定して指定箇所へ遷移させる
};

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes,
  scrollBehavior,
  //インスタンスの作成時に、scrollBehaviorに位置を返す関数を指定
});

router.beforeEach((to, from, next) => {
  //ページ遷移が起こる直前にその関数が実行。
  //引数のto,fromには，現在遷移しようとしているルーティングの遷移先ルートと遷移元ルートの情報が入ってる。
  const requiresAuth = to.matched.some((record) => record.meta.requiresAuth);
  //requiresAuthの状態をもつルートレコードなのかを確認。
  if (requiresAuth) {
    // このルートはログインされているかどうか認証が必要。
    // もしされていないならば、ログインページにリダイレクトします。
    firebase.auth().onAuthStateChanged(function(user) {
      if (user) {
        next();
      } else {
        next({
          path: "/signin",
          query: { redirect: to.fullPath },
        });
      }
    });
  } else {
    next();
    //同じ階層にある要素を取得できるが、対象要素の次に配置されている要素だけを取得。
  }
});

export default router;

Answer 1

以下のようにすることで解決しました。

  methods: {
    updateData() {
      const currentUser = firebase.auth().currentUser;
      this.uid = currentUser.uid;
      if (currentUser) {
        firebase
          .firestore()
          .collection("users")
          .doc(this.$route.params.uid)
          .get()
          .then(snapshot => {
            this.profileData = snapshot.data();
          });
      }
      console.log(currentUser.photoURL);
    }
  },
  watch: {
    "$route.params.uid": {
      handler: function() {
        this.updateData();
      },
      deep: true,
      immediate: true
    }
  },

  created() {
    this.updateData();
  }