vue3 vue-router Cannot read properties of undefined (reading 'push') エラー

Question

やりたいこと

vue3 composition api　にて
vue router を使って
ボタンを押して画面遷移したいです。

解決したいエラー

ですが　、ボタンクリックに以下エラーがでて遷移できません。

[signinError] TypeError: Cannot read properties of undefined (reading 'push')
at Proxy.goHome (Hello.vue:30:20)
at _createElementBlock.onClick._cache.<computed>._cache.<computed> (Hello.vue:3:21)
at callWithErrorHandling (runtime-core.esm-bundler.js:157:22)
at callWithAsyncErrorHandling (runtime-core.esm-bundler.js:166:21)
at HTMLButtonElement.invoker (runtime-dom.esm-bundler.js:345:9)

該当のソースコード

<template>
    <button @click="goHome">GO GO</button>    
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { useRouter } from 'vue-router'
import Home from './Home.vue';

export default defineComponent({
  setup() {
        const router = useRouter()

    const goHome = async () => {
        try {
            router.push("/hello");
        } catch (error) {
            console.log("[signinError]", error);
            alert(`NG:${error}`);
        }
    };

    return {
      goHome,
    }
  },
})
</script>

試したこと

似たエラーで詰まっている人の記事を見つけたのですが、
解決にはいたりませんでした。

https://teratail.com/questions/4p6aueermdbz0w
https://coneta.jp/article/e8894913-88b5-4404-9674-4056df144a95/

vue3の初歩的なところで詰まってしまい恐縮なのですが、
どなたか解決方法知っているかた、おりましたら、教えていただけると幸いでございます。

Comments

[yuma.inaura]

質問のコードブロックが崩れてるので整えていただければと

[MataSema]

ありがとうございます。修正しました。

[yuma.inaura]

うーんほぼ同じコードで試しましたが普通に動きますね、なんでだろ

( nuxt@3.0.0 )

[MataSema]

ありがとうございます。
npm init vue@latest 、routerインストール指定したらうまくいきました。

routerのインストール失敗が原因でした。

Answer 1

自己解決しました。
npm init vue@latestで新規作成し直し、その時のrouterを指定してやったら
うまくいきました。

おそらくrouterのインストールに失敗していたのだと思います。
ありがとうございました。