Vue3におけるイベント処理について

前提

Vue3にて、Routerを使っての画面遷移について。

開発言語の選定のためVue3の基本的部分から勉強を開始しております。
ログインとメニュー画面などの画面遷移(ゆくゆくはメニュー画面画面から各処理画面を呼びたい)には
Roiterを使用しての遷移が可というところまで理解をしました。
画面遷移の際のイベント処理について実現可能かの質問となります。

実現したいこと

プロジェクト自体は "npm init vue@lates"コマンドで作成しました。
デフォルトでApp.vueがあり、App.vueと同じ階層にviewsフォルダを作成し、その中に
Login.vueとMenu.vueが存在します。
Login.vue・・・ID・PWの入力欄とログインボタンがあるような画面。
Menu.vue・・・各処理を呼び出すボタンがあるような画面。
ーーーーー
構成
project
└views
|└Login.vue
|└Menu.vue
└ App.vue
ーーーーー

App.vue

<script setup lang="ts"> import { RouterLink, RouterView } from 'vue-router' import axios from 'axios' </script> <template> <div> <RouterView /> /*LoginとMenuが切り替わる*/ </div> </template>

App.vueのtempleteタグ内では、<RouterView />を定義しているのみです。
index.ts内で各パスの設定をしているので、
localhost/loginでLogin.vueの内容が
localhost/MenuでMenu.vueの内容がそれぞれ切り替わるところまでは実装できました。

Login.vue(子)内のログインボタンを押したイベントを
(本来はここでログイン認証してその結果次第で)
App.vue(親)で受け取ることは可能でしょうか?
受け取った結果、localhost/Menuへ遷移したいと考えております。
実装方法などご教授いただければ幸いです。

以上です。よろしくお願いいたします。

コメントを投稿

0 コメント