javascript - 当其中一个组件有多个组件时，vue-router 不会渲染组件

Question

所以我有这个主页和一个导航栏：问题是当我尝试在andHome | About | Services
之间切换时，只显示 Home 的组件 这是我的HomeAbout
HomeComponent.vue

<template>
  <div>
    <header-component :logo="logo" />
    <router-view />
    <FooterComponent />
  </div>
</template>

这是路由器链接所在的 Header 组件

 <nav>
        <router-link :to="{ name: 'Body' }" class="mr-5 hover:text-gray-900"
          >Home</router-link
        >
        <router-link :to="{ name: 'About' }" class="mr-5 hover:text-gray-900"
          >About</router-link
        >
        <router-link :to="{ name: 'Services' }" class="mr-5 hover:text-gray-900"
          >Services</router-link
        >
</nav>

这是router.js

const routes = [
    {
        path: "/",
        name: "Home",
        component: Home,
        children: [
            {
                path: "",
                name: "Body",
                component: HomeContent,
            },
            {
                path: "about",
                name: "About",
                component: About,
            },
            {
                path: "services",
                name: "Services",
                component: Services,
            },
        ],
    }, ]
const router = createRouter({
    history: createWebHistory(),
    routes, 
});

export default router;

这是 HomeContent 组件：

<template>
  <div>
    <HeroComponent :heroImg="heroImg" />
    <FeatureComponent />
    <TestimonialsComponent />
    <ContactComponent />
  </div>
</template>

这是关于组件

<template>
  <h1>About</h1>
</template>

因此，当我第一次启动我的网站时，HomeContent渲染正常，但是当我转到时About，没有任何变化，但是当我刷新页面时，About component如果我点击渲染Home，HomeContent问题就会再次发生

标签： javascriptlaravelvue.js