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で画面切り替えが行われるようです。
何か良い方法はないでしょうか?
ご不明な点がありましたら、ご質問ください。本当に困っているのです。
日本語がつたなく申し訳ございません。