[Vue3 + VueRouter4] ルーター準備完了タイミングは isReady() を使う

はじめに

Vue3 + VueRouter4 の環境で、コンポーネントのマウント時にルーターの名前、パラメータなどを取得したら undefined になってしまいました。

色々調べてみると isReady() を使うのが良さそうなので備忘録を残します。

ルートの書き方は公式ガイドをご覧下さい。

Vue2 + VueRouter3 で Options API の書き方

コンポーネントがマウントされた時に、合致するルートが指定されていなければ list というルートに誘導する処理です。
合致するルートがあれば誘導しません。

<script>
export default {
  //  〜略〜
  mounted() {
    if (!this.$route.name) {
      this.$router.replace({
        name: 'list',
      });
    }
  },
}
</script>

Vue3 + VueRouter4 だと

Vue3 の <script setup> 構文で書きました。

<script setup lang="ts">
import { onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';

const route = useRoute();
const router = useRouter();

onMounted(() => {
  console.log(route.name); // undefined になる

  if (!route.name) {
    router.replace({
      name: 'list',
    });
  }
});
</script>

合致するルートの URL を開いても「合致なし」判定になる

上記の書き方では他のルートに合致する URL で開いても list に誘導されてしまいます。
console.log(route.name) で確認しても undefined と表示されるだけです。

isReady() を使って準備完了を知る

await router.isReady(); を使うことでルーターの初期準備が完了を知ることができます。

<script setup lang="ts">
import { watch, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';

const route = useRoute();
const router = useRouter();

const checkRouterReady = async () => {
  console.log('ルーター準備前', route.name);
  await router.isReady();
  console.log('ルーター準備完了', route.name);
  // route.name や route.params に関する処理を書く
};

watch(route, () => {
  console.log('ルート変更された');
});

onMounted(() => {
  checkRouterReady();
});
</script>

ルート list に合致する URL 開いた時の console.log() の結果は下記のようになります。

ルーター準備前 undefined
ルート変更された
ルーター準備完了 list

おわり

今まで JavaScript + Vue2 + VueRouter3 + Vuex3 で制作していたものを
TypeScript + Vue3 + VueRouter4 + Pinia で作り直しているので色々大変です。