vue-cliでトップページのみ背景画像を入れたい

タイトルの通り、トップページのみ背景画像を入れたいのですが、vue-cliのtemplateを使っていて、bodyに適用すると全体に適用されてしまいます。
この場合はどのようにすれば背景画像をトップページだけに入れることができるのでしょうか。

css
1body {
2  background-image: url("assets/top.jpg");
3}

template
1<template>
2  <div id="app">
3    <header></header>
4    <!-- ここに個別ページが挿入される -->
5    <router-view/>
6    <!-- 個別ページおわり -->
7  </div>
8</template>

toppage
1<!-- このページだけに背景画像を入れたい -->
2<template>
3  <div class="top">
4    <h1 class="top-h1">Welcome</h1>
5  </div>
6</template>

行動規範の内容に同意します

回答1件

routerは使用したことがないので、あまり自信はないのですが、
以下のように、app.vueにdivを1枚入れてしまって、
そこでクラスの制御をしたらいかがでしょうか。
あとは、子コンポーネントのtoppage.vue側のmountedで、
親となるapp.vueのisTopプロパティを代える処理を入れればいいのかな～

私も識者に正しい方法を聞きたいところです

vueApp
1<template>
2  <div id="app">
3    <!--ココに以下のdiv挿入-->
4    <div :class="{'is-top': isTop}">
5      <header></header>
6      <!-- ここに個別ページが挿入される -->
7      <router-view/>
8      <!-- 個別ページおわり -->
9    </div>
10  </div>
11</template>
12
13<script>
14  export default {
15    name: "app",
16    data() {
17      return {
18        isTop: true
19      };
20    }
21  };
22</script>
23
24<style>
25  .is-top :{
26    background-image: url("assets/top.jpg");
27  }
28</style>