Question

我刚刚将 vue router 4 安装到 vue 3 应用程序中。在设置我的回家路线时，我一直让应用程序显示两次，甚至两次导航，但不知道为什么。我尝试将 Navigation 组件引入 App.vue 和 Home.vue 但仍然显示两次。有什么我在这里俯瞰的地方吗？

路由器/index.js

import { createWebHistory, createRouter } from "vue-router";
import Home from "../components/Home";
import About from "@/components/About";

const routes = [
    {
        path: "/",
        name: "Home",
        component: Home,
    },
    {
        path: "/about",
        name: "About",
        component: About,
    },
];

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

export default router;

导航.vue

<template>
  <div id="nav">
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
  </div>
  <router-view/>
</template>

<script>
export default {
  name: 'Navigation'
}
</script>

Home.vue

<template>
    <Header/>
    <Navigation/>
    <div>
        <About/>
    </div>
</template>

App.vue

<template>
  <Home/>
</template>

<script>
import Home from "@/components/Home";
export default {
  components: {Home}
}
</script>

Answer 1

Home 包含 Navigation（其中包含 <router-view>，呈现当前路线）和 About。由于 About 始终呈现，如果当前路线是 /about，您会看到其中两个。

<template>
  <Header/>
  <Navigation/> <!-- contains router-view -->
  <div>
    <About/> <!-- ❌ always rendered in addition to current route -->
  </div>
</template>

您当前的路由配置没有子路由，所以应该只有一个<router-view>，而且通常在根组件（App.vue）中：

App.vue：

<template>
  <Header />
  <Navigation />
  <router-view />
</template>

Navigation.vue：

<template>
  <div id="nav">
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
  </div>
  <!--<router-view/> ❌ move to App.vue -->
</template>

Home.vue：

<template>
  <!--<Header/> ❌ move to App.vue -->
  <!--<Navigation/> ❌ move to App.vue -->
  <div>
    <About />
  </div>
</template>

demo

Vue 路由器 4 和 Vue 3 应用程序两次显示组件

1 个答案: