时间戳

首页 > 解决方案 > 为什么组件显示两次？

vue.js - 为什么组件显示两次？

问题描述

我正在学习 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”显示了两次。我不明白为什么。

标签： vue.jsvue-router

解决方案

  1. 将主路由视图从 Home 组件移动到 App.vue。
  2. 从 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
]

推荐阅读