

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

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

画面遷移のイメージ図を添付します。  
[![画像の説明をここに入力](https://i.stack.imgur.com/2kmqY.png)](https://i.stack.imgur.com/2kmqY.png)

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

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

[code]

    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')
    }
    ]
    
[/code]

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

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

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

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


CC BY-SA 4.0
2022-12-06T09:41:49.217
92601
2022-12-06T13:06:06.987
2022-12-06T13:06:06.987
3060
42713
question
typescript vue.js
Vue-Routerで切り替えた画面の中にあるVue-Routerでの切替