Vue3でVueRouterを使用して子コンポーネントを切り替える方法

Question

VueRouterでコンポーネントの切り替え

• 親コンポーネントの中の一部を複数ある子コンポーネントで切り替えたい

前提と質問

初心者ですので見当違いなことを言っていたらすみません。
Vue + VuetifyでSPAの社員管理を行うWebアプリケーションを作るという学習をしています。
画面として一番最初のHome画面以外すべての画面にHomeに戻る同じボタンを配置することになりました。
そこでHome画面から遷移した後にボタンを表示するだけの親コンポーネントで画面にボタンを表示して、その中でそれぞれの画面は子コンポーネントとして画面を切り替えたいと思いました。

調べた結果Vue Routerを使えばできそうだったのですができなかったのでここで質問させていただきます。
<RouterView />に指定のコンポーネントを表示させることは可能でしょうか？
今のままですと画面にはHomeボタン以外なく、子コンポーネントが表示されない状態です。
「/」のパスはHome画面で使用しているのでそれ以外のパスのコンポーネントを<RouterView />のところに表示させたいです。

該当のソースコード

質問用に簡単なものに差し替えてあります。
Home画面から遷移した後に表示する画面用のコンポーネントです。

<template>
    <div>
        <v-row justify="center">
            <div>
                <!-- ここに子コンポーネントを入れて画面表示を切り替えたい -->
                <RouterView />
            </div>
        </v-row>
        <v-row>
　　　　<!-- Homeボタン -->
            <v-btn size="x-large" color=accent class="ma-16, button" @click="$router.push({ name: 'home' ,query:{id}}, )">
                <v-icon icon="mdi-home" />
                     HOME
            </v-btn>
        </v-row>
    </div>
</template>

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import Select from '../views/return/SelectReturnBook.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
    {
      path: '/parent',
      name: 'parent',
      component: () => import('../views/Parent.vue'),
      children: [
        {
          path: '',
          component: () => import('../views/Child1.vue')
        },
        {
          path: 'child2',
          component: () => import('../views/Child2.vue')
        }
      ]
    },
    {
      path: '/child1,
      name: 'child1',
      component: () => import('../views/Child1.vue'),
    },
  
    {
      path: '/child2',
      name: 'child2',
      component: () => import('../views/Child2.vue')
    }
  ]
})

export default router

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

Vue3です

Comments

[shiketa]

Vue, Vuetify にプラスして、Nuxt https://nuxt.com/ の導入を検討されてはいかがでしょうか。
* Layouts Directory https://nuxt.com/docs/guide/directory-structure/layouts
「親コンポーネント」を「~/layouts/default.vue」と読み替えることで、実現できるとおもいます。

[FKM]

VueのままSPAを実行するならrouting.jsを提示してください。Vueの場合ルーティング情報はそこに追記していきます。RouterViewはあくまでビューだけですので、今のままじゃリンク（RouterLink）がどこにもないです。要は放送番組のないテレビのような状態になっています。

そのリンク先が20、30とかになっていくならshiketa氏の指摘通りNuxt導入の方が省力化できます。

[ksoto]

質問内容にindex.jsの内容を追加しました。こちらも質問用に簡単に差し替えてあります。
今回質問した<RouterView />を入れたい親コンポーネントはParent.vueで切り替える中身がChild1.vueとChild2.vueになります。

質問した後にネストされたルートというやつで実装できないかと思いindex.jsのParent.vueのところにchildren:[]を追加しているのですが気にしないでください。

Nuxtに関してなのですが取り敢えず今はVueの学習をしていて、ある程度慣れてきてからNuxtの学習をしようと考えていたのであまり今は使用することを考えていませんでした。

Answer 1

router.pushでクエリパスとして遷移したい場合はpathプロパティを付与すればいけるはずです。

@click="$router.push({ path: '/child1' ,query:{id:id}},)

パスパラメータとして渡したい場合はnameとparamsプロパティの組み合わせになります。微妙に使用可能なプロパティが違うので注意。

@click="$router.push({ name: 'child1' ,params:{id:id},)

省略した場合は自動でpathとして認識されるのですが、queryプロパティを付与した場合は、以上のように書き分ける必要があります。

プログラムによるナビゲーション

一般的にはrouter-linkタグを使うのがセオリーです。その場合はクリックイベントを付与してイベントメソッド内でrouter.pushすれば任意のパラメータを送れます。

Comments

[ksoto]

Home画面からParentに遷移したときに子コンポーネントが表示されずにいて困っていたのですが、Home画面から遷移するときに@click="$router.push({ path: '/parent' ,query:{id:id}},)としていたからでした。
@click="$router.push({ path: '/parent/child1' ,query:{id:id}},)にしたら解決しました。

回答ありがとうございました。