1

Vue3にてVue-Routerを使用した画面遷移の実装を考えています。
具体的な.vueファイルや画面構成は以下の通りです。

App.vue: ルートvueファイル
Login.vue: ID/PWの入力欄、ログイン画面
Main.vue: ヘッダーとフッターのある画面
Service.vue: ユーザーが契約しているサービスを選択する画面
Menu.vue: サービスを選択した結果のメニュー画面

画面遷移のイメージ図を添付します。
画像の説明をここに入力

App.vueのtemplateタグでは、RouterViewのみが定義されており、その下にある
Login.vueとMain.vueを切り替えています。
ここまでは成功したのですが
Main.vueでService.vueとMenu.vueを切り替える方法がわかりません。
Main.vueのtemplateタグにRouterViewを定義し、切り替えることは可能でしょうか?

以下、index.tsの内容です。

const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
  {
  path: '/',
  name: 'main',
  component: Main,
},
{
  path: "/login",
  name: 'Login',
  component: Login
},
{
  path: "/service",
  name: "service",
  component: service
},
{
  path: '/about',
  name: 'about',
  // route level code-splitting
  // this generates a separate chunk (About.[hash].js) for this route
  // which is lazy-loaded when the route is visited.
  component: () => import('../views/AboutView.vue')
}
]

ブラウザから'url/service'を呼び出すと、App.vueで定義されたRouterViewで画面切り替えが行われるようです。

何か良い方法はないでしょうか?

ご不明な点がありましたら、ご質問ください。本当に困っているのです。

日本語がつたなく申し訳ございません。

0

この質問に回答するには、ログインする必要があります。

のタグが付いた他の質問を参照する。