質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

解決済

vue-routerで画面遷移したい

gegegege
gegegege

総合スコア19

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

1回答

0評価

0クリップ

147閲覧

投稿2022/06/22 15:08

前提

viteでWebアプリのフロントを実装しています。
画面遷移の機能を実装中に以下のエラーメッセージが発生しました。

実現したいこと

ボタンを押したときに、特定の処理を実行した後、任意の画面に遷移させたいです。

発生している問題・エラーメッセージ

TypeError: Cannot read properties of undefined (reading 'push')

該当のソースコード

script

<script setup lang="ts"> import { reactive } from "vue"; import { signIn, signOut } from "../auth"; import { useRouter } from "vue-router"; const state = reactive({ username: "", password: "", }); const clickSignInButton = async () => { try { const resultSignIn = await signIn(state.username, state.password); alert("OK!!!"); console.log("[resultSignIn]", resultSignIn); const router = useRouter(); const moveNextScreen = () => { router.push("/Main"); }; moveNextScreen(); } catch (error) { console.log("[signinError]", error); alert(`NG:${error}`); } }; </script>

template

<button @click="clickSignInButton">ログイン</button>

試したこと

Vue.jsのVue Routerを使用してプログラムで画面遷移する方法!の「Compotion APIでURLを指定して遷移する」を参考に、下記コードを書いてみたら特に反応がなかったので、上記コードに直したらエラーが出ました。

script

<script setup lang="ts"> import { reactive } from "vue"; import { signIn, signOut } from "../auth"; import { useRouter } from "vue-router"; const state = reactive({ username: "", password: "", }); const clickSignInButton = async () => { try { const resultSignIn = await signIn(state.username, state.password); alert("OK!!!"); console.log("[resultSignIn]", resultSignIn); const router = useRouter(); const moveNextScreen = () => { router.push("/Main"); }; return { moveNextScreen, }; } catch (error) { console.log("[signinError]", error); alert(`NG:${error}`); } }; </script>

以下のパターンも試してみましたが、エラー内容は変わらずでした。

script

<script setup lang="ts"> import { reactive } from "vue"; import { signIn, signOut } from "../auth"; import { useRouter } from "vue-router"; const state = reactive({ username: "", password: "", }); const clickSignInButton = async () => { try { const resultSignIn = await signIn(state.username, state.password); alert("OK!!!"); console.log("[resultSignIn]", resultSignIn); const router = useRouter(); router.push("/Main"); } catch (error) { console.log("[signinError]", error); alert(`NG:${error}`); } }; </script>

補足情報(FW/ツールのバージョンなど)

typescript: 4.5.4
vite: 2.8.0
vue: 3.2.25
@vitejs/pluhin-vue: 2.2.0
vue-router: 4.0.14

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。