vue-router页面跳转了，但是组件内容不显示。

这是App.vue

<template>

  <div id="nav">
    <router-link to="/home">首页</router-link>
    <router-link to="/profile">我的</router-link>
    <router-view></router-view>
  </div>

</template>
<script>
export default {
  name: "App"
}
</script>

这是Home.vue

<template>
  <h1>我是Home</h1>
</template>

<script>
export default {
  name: "Home",
} 
</script>

index.js

import { createRouter, createWebHashHistory } from 'vue-router'

const routes = [
  {
    path: "/profile",
    name: "Profile",
    components: () => import("../components/Profile.vue")
  },
  {
    path: "/home",
    name: "Home",
    components: () => import("../components/Home.vue")
  }
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router

最后路由跳转了，但是页面组件内容不显示

解决了，component多加了个s