[Vuejs]-Why the component is displayed twice?

by

0👍

  1. Move your main router-view from Home component to App.vue.
  2. Remove the Home component from App.vue, and add contemporary things like header and footer to App.vue, as they are gonna be layout of your App. The reason the component beingd displayed twice, is that create a Home component inside near another the same component, as it is already in layout. Your App.vue should look somehow like this:
<template>
  <div id="app">
    <div id="nav">
        <AppHeader/>
        <router-view/>
        <AppFooter/>
    </div>
  </div>
</template>

And 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>

In your router.js just import the Home.vue and add new route:

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

Leave a comment