vue-routerで画面遷移がしたい(ページの切り替えがしたい)

Question

前提・実現したいこと

VueとVuetifyで画像投稿アプリを作っています。（まずはUIを作成中です。）
vue-routerで画面遷移をする際に遷移元の画面が残ってしまいます。完全に画面を別のページへ遷移させる方法はありますでしょうか。
具体的には、App.vueのContentコンポーネントでカード形式で画像の一覧を並べており、個々の画像をクリックすることでContentDetailコンポーネントの詳細画面に遷移させたいのですが、<router-view />の位置からもわかる通り、ContentDetailコンポーネントが表示された下部にContentコンポーネントのカード一覧が残ってしまう状況です。
詳細のページを表示する際は、カード一覧のページを表示させないように画面遷移したいのですが、方法がわからないため、ご教授頂けますと幸いです。

該当のソースコード

App.vue

<template>
  <v-app dark>
    <Header />
    <router-view />
    <div class="content-wrapper">
      <v-row>
        <v-col v-for="i in 6" :key="i" cols="12" sm="6" md="4" lg="3">
          <Content />
        </v-col>
      </v-row>
      <Modal />
    </div>
  </v-app>
</template>

<script>
import Content from "./components/Content.vue";
import Header from "./components/Header.vue";
import Modal from "./components/Modal.vue";

export default {
  components: { Content, Header, Modal },
};
</script>

Content.vue

<template>
  <v-card
    class="v-card mx-auto"
    max-width="1000"
    tile
    :to="{ name: 'detailPage' }"
  >
    <v-img
      src="https://cdn.vuetifyjs.com/images/cards/sunshine.jpg"
      height="200px"
    >
      <div class="fill-height bottom-gradient"></div>
    </v-img>
    <v-card-title>
      Top western road trips
    </v-card-title>
    <v-card-subtitle>
      1,000 miles of wonder
    </v-card-subtitle>
    
  </v-card>
</template>

ContentDetail.vue

<template>
  <div>
    <v-app>

      <v-carousel cycle hide-delimiters>
        <v-carousel-item
          v-for="(item, i) in items"
          :key="i"
          :src="item.src"
        ></v-carousel-item>
      </v-carousel>
      <div class="detailtext">
        <h2>タイトル</h2>
        <p>
          詳細コメント詳細コメント詳細コメント詳細コメント詳細コメント詳細コメント詳細コメント詳細コメント詳細コメント
          詳細コメント詳細コメント詳細コメント詳細コメント詳細コメント詳細コメント詳細コメント詳細コメント詳細コメント詳細コメント
          詳細コメント詳細コメント詳細コメント詳細コメント詳細コメント詳細コメント詳細コメント詳細コメント詳細コメント詳細コメント
          詳細コメント詳細コメント詳細コメント詳細コメント詳細コメント詳細コメント詳細コメント詳細コメント詳細コメント詳細コメント
        </p>
      </div>
    </v-app>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        {
          src: "https://cdn.vuetifyjs.com/images/carousel/squirrel.jpg",
        },
        {
          src: "https://cdn.vuetifyjs.com/images/carousel/sky.jpg",
        },
        {
          src: "https://cdn.vuetifyjs.com/images/carousel/bird.jpg",
        },
        {
          src: "https://cdn.vuetifyjs.com/images/carousel/planet.jpg",
        },
      ],
    };
  },
};
</script>

import Vue from "vue";
import Router from "vue-router";
import ContentDetail from "@/components/ContentDetail.vue";

Vue.use(Router);

export default new Router({
  mode: "history",
  routes: [
    {
      path: "/detail",
      name: "detailPage",
      component: ContentDetail,
    },
  ],
});

試したこと

表示位置が怪しいと思い、<router-view />の位置を変えたりして見ましたが、App.vueのどこに配置しても他のコンポーネントも描写されてされてしまいました。（当たり前ですが、、、）

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

"core-js": "^3.6.5",
"vue": "^2.6.11",
"vue-router": "^3.4.9",
"vuetify": "^2.2.11"

Answer 1

App.vue　に書くとすべてのページに表示されるのは仕様です。

  {
    path: '/',
    name: 'Home',
    component: Home,
  },

こんな感じにrouteを貼ってあげて、
detailページと同じように、一覧表示するためのページを作りましょう。

Comments

[arcu]

>App.vue　に書くとすべてのページに表示されるのは仕様です。
ご指摘の通り、この仕様を知らなかったことが原因でした。App.vueには最低限の記述のみ行い、他のコンポーネントに移動し、routeを貼ることで解決いたしました。5時間ほど悩んでましたので大変助かりました。ありがとうございます。