VUE路由组件渲染不出来?

Question

浏览器里没有报错

main.js

//main.js


import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
import Home from './components/Home'
import Menu from './components/Menu'

Vue.use(VueRouter)
      
const routes = [
    {path:'/',componet:Home},
    {path:'/menu',componet:Menu},
]

const router = new VueRouter({
    routes: routes,
    mode:'history'
})

new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

app.vue

//app.vue

<template>
  <div id="app">
      <div class="container">
          <app-header></app-header>
      </div>
      <div class="container">
         <router-view></router-view>
      </div>
  </div>
</template>

<script>
import Header from './components/Header';

export default {
  components:{
    "app-header":Header
  }
}
</script>

<style>

</style>

Header.vue

//Header.vue

<template>
    <header>
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <a class="py-2" href="#">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="d-block mx-auto"><circle cx="12" cy="12" r="10"></circle><line x1="14.31" y1="8" x2="20.05" y2="17.94"></line><line x1="9.69" y1="8" x2="21.17" y2="8"></line><line x1="7.38" y1="12" x2="13.12" y2="2.06"></line><line x1="9.69" y1="16" x2="3.95" y2="6.06"></line><line x1="14.31" y1="16" x2="2.83" y2="16"></line><line x1="16.62" y1="12" x2="10.88" y2="21.94"></line></svg>
            </a>
            <a href="/" class="navbar-brand">Pizza点餐系统</a>
            <ul class="navbar-nav">
                <li><a href="/" class="nav-link">主页</a></li>
                <li><a href="/menu" class="nav-link">菜单</a></li>
                <li><a href="#" class="nav-link">管理</a></li>
                <li><a href="#" class="nav-link">关于我们</a></li>
            </ul>
            <ul class="navbar-nav ml-auto">
                <li><a href="#" class="nav-link">登录</a></li>
                <li><a href="#" class="nav-link">注册</a></li>
            </ul>
        </nav>
    </header>
</template>

Answer 1

Home组件怎么写的？