Vue Router如何加载第二个组件负载

Question

我正在尝试将第二个组件加载到Vue中，但根本不会加载。 可以将home视为主页，其他页面也可以加载到主页，但是我希望它在主页加载后立即加载首页，因为我也有子路由。

<template>
  <div>
    <topbar></topbar>
    <div class="container mx-auto bg-gray-300">
      <h1>Logo</h1>
    </div>

    <div>
      <router-link :to="{ name: 'Home' }">Home</router-link>
    </div>
    <div>
      <router-link :to="{ name: 'About' }">About Page</router-link>
    </div>
    <router-view></router-view>

    <router-view name="frontPage"></router-view>
    <footer>
      <h1>Footer</h1>
    </footer>
  </div>
</template>
<script>
import topbar from "./../../components/TopbarComponent.vue";
import hooperCompo from "./../../components/HooperComponent.vue";
export default {
  name: "Home",
  data() {
    return {
      message: "This is the home component!",
    };
  },
  components: {
    topbar,
    hooperCompo,
  },
  computed: {},
  mounted: () => {},
  methods: {},
};
</script>

这是我的路由器链接

Vue.use(VueRouter);

const routes = [
    {
        path: "/",
        name: "Home",
        components: {
            default: Home,
            frontPage: Front
        },
        children: [
            {
                path: "/about",
                name: "About",
                component: About
            }
        ]
    },

如何在加载主页后立即加载首页组件？