ユーザー認証していない時とユーザー認証している時でページ遷移情報を変えたい

Question

作りは上記のようになっており、router.vue(以下コード参照)にてそれぞれ動的ルートマッチングを参考にして「path: "/●●●●/:uid"」という風にユーザーのuidをパスの後ろに記載して、ユーザー認証している場合には、「this.$route.params.uid」を使ってそれぞれのページにuidを使って遷移するように記述してます。

そのため、headerのMYPAGEやPOSTには「:to="/●●●●/${this.uid}"」という風にパスを参照して遷移するようにしてしまっているのでユーザー認証していない状態では当然のことながらuidがまだ無いため、以下のようなエラーが出ており、尚且つuidを参照できないので真っ白なページに遷移してしまいます。

Cannot read property 'uid' of null

そこでユーザー認証している場合の遷移はうまくいっているので、ユーザー認証していない場合ではuidを参照しないでページ遷移出来るようにしたいです。

#試したこと

router.vueにてそれぞれ「path: "/●●●●/:uid"」としている部分の「:uid」を削除して、リンク内も「to="/●●●●"」としてあげるとuidを参照しないので当然ページには飛べて読み込みますが、「this.$route.params.uid」としてuidを使用しているページもあるので、ユーザー認証した場合に不都合になってしまいます。。

router.vueにてユーザー認証している場合のpathとユーザー認証していない場合のpathを切り替えることは可能なのでしょうか。

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

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

#header.vue

<template>
  <header class="header">
    <router-link to="/" class="header-ttl neon">
      <span class="header-ttl-color neon2">C</span>inemary
    </router-link>
    <ul class="header-menu">
      <li>
        <router-link to="/" class="header-link neon3 flash">HOME</router-link>
      </li>
      <li>
        <router-link to="/about" class="header-link neon3 flash">ABOUT</router-link>
      </li>
      <li>
        <router-link :to="`/board/${this.uid}`" class="header-link neon3 flash">POST</router-link>
      </li>
      <li>
        <router-link to="/signup" class="header-link neon3 flash" v-if="!authenticatedUser">SINGUP</router-link>
      </li>
      <li>
        <router-link to="/signin" class="header-link neon3 flash" v-if="!authenticatedUser">SINGIN</router-link>
      </li>
      <li>
        <router-link :to="`/mypage/${this.uid}`" class="header-link neon3 flash">MYPAGE</router-link>
      </li>
      <li v-if="authenticatedUser">
        <button class="header-link neon3 flash" @click="signOut" v-if="authenticatedUser">SINGOUT</button>
      </li>
    </ul>
  </header>
</template>

export default {
  name: "signOut",
  data() {
    return {
      authenticatedUser: "",
      uid: []
    };
  },
  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;
      } else {
        this.authenticatedUser = false;
      }

      const currentUser = firebase.auth().currentUser;
      this.uid = currentUser.uid;
    });
  }
};

#router.vue

{
    path: "/mypage/:uid",
    name: "Mypage",
    component: Mypage,
    meta: { requiresAuth: true },
  },
  {
    path: "/board/:uid",
    name: "Board",
    component: Board,
  },
  {
    path: "/chat/:id",
    name: "Chat",
    component: Chat,
    meta: { requiresAuth: true },
  },
  {
    path: "/bookmark/:uid",
    name: "Bookmark",
    component: Bookmark,
  },

Answer 1

以下のようにユーザー認証してない場合とユーザー認証している場合のコードを二つ作って解決しました。

#header.vue

<li>
 <router-link :to="`/board/${this.uid}`" class="header-link neon3 flash" v-if="authenticatedUser">POST</router-link>
 <router-link to="/board" class="header-link neon3 flash" v-if="!authenticatedUser">POST</router-link>
</li>

#router.vue

{
    path: "/board/:uid",
    name: "Board",
    component: Board,
  },
  {
    path: "/board",
    name: "Board",
    component: Board,
  },