为什么组件显示两次？答案

【问题标题】：Why the component is displayed twice?为什么组件显示两次？
【发布时间】：2020-11-13 06:08:43
【问题描述】：

我正在学习 vue + vuex + vue-router。我有一个问题，当然是基本问题。

我有这个应用程序：

<template>
  <div id="app">
    <div id="nav">
        <home v-if="isLogged"></home>
        <login v-else></login>
    </div>
  </div>
</template>

机制没问题。如果我已连接，则显示组件“home”，否则显示组件“login”。完美。

组件“家”是：

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    
    HOME PAGE AVEC LES MENUS A FAIRE

    <router-link to="/user" v-if="isLogged">User</router-link>
    <router-link to="/about" v-if="isLogged">About</router-link>
    <button type="button" @click="logout()" v-if="isLogged">Logout</button>

    <router-view />
  </div>
</template>

路由器是：

    Vue.use(VueRouter)

  const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    meta: {
        auth: true
    }
  },
  {
    path: '/about',
    name: 'About',
    meta: {
      auth: true
    },
    component: () => import( /* webpackChunkName: "about" */ '../views/About.vue')
  },
  {
    path: '/user',
    name: 'User',
    meta: {
      auth: true
    },
    component: () => import( /* webpackChunkName: "about" */ '../views/User.vue')
  },
  {
    path: '/login',
    name: 'Login',
    component: () => import( /* webpackChunkName: "login" */ '../views/Login.vue')
  },
  { 
      path: '*', 
      component: () => import('../views/errors/NotFound.vue')
  }
]

我为“/”路线获得了这个：

这是“关于”路线：

如您所见，“home”组件显示了两次。我不明白为什么。

【问题讨论】：

你在 home 组件中有一个router-view，它应该在 app.vue 上
感谢 depprem 的回答。我已经尝试将这个“路由器视图”移到“主页”组件之外。是一样的：组件显示两次。
VueRouter 会将router-view 替换为您在路由定义中提供的组件，因此基本上您只需在Home 组件中渲染Home 组件。您应该按照上述评论的建议在应用程序组件中使用router-view。
我明白了。我从路由器声明中删除了“Home”组件，只是注释了 // component: Home 行，现在它可以像我想要的那样工作了。我还在继续学习 Vue。感谢 depprem 和 USer28

标签： vue.js vue-router

【解决方案1】：

将主路由视图从 Home 组件移动到 App.vue。
从 App.vue 中删除 Home 组件，并将页眉和页脚等现代内容添加到 App.vue，因为它们将成为您的应用程序的布局。组件显示两次的原因是在另一个相同组件附近创建一个 Home 组件，因为它已经在布局中。你的 App.vue 应该看起来像这样：

<template>
  <div id="app">
    <div id="nav">
        <AppHeader/>
        <router-view/>
        <AppFooter/>
    </div>
  </div>
</template>

还有 Home.vue：

<template>
    <div class="container">
        <div class="main_content" v-if="isAuthenticated">
            <!-- Here goes you Home page -->
        </div>
        <login v-else></login>
    </div>
</template>

在你的 router.js 中，只需导入 Home.vue 并添加新路由：

import Home from 'path/to/home.vue'
const routes = [
    {
        path: '/',
        name: 'home',
        component: Home
    }
    // ... other routes
]

【讨论】：