Vue js single page and siderbar with header issue

Question

I am creating vue js application. I have login screen and after login, left sidebar for options like dashboard, users, settings.. and header for signout and notification feature.

My architecture is : I have 1 common file(main layout) in which header and sidebar are added. Now on 1st time open after login, dashboard is called in which main layout is imported.

I want to call this sidebar and header only once.. but the problem is whenever I click on sidebar, it opens respective screen in right side in container but sidebar and header also calls as I have imported main file to each component.

Due to this my firebase listener attached in header calls multiple times. I want to load header only once after login so that I can use firebase listener correctly. My architecture is below:

main layout file:

<template>
    <div id="appOne">
        <div class="col-sm-3 col-lg-2 hamburger" style="padding-left: 0;">
            <Sidebar></Sidebar>
        </div>  
         <div class="col-sm-9 col-lg-10 fixed">
             <Header class="header"></Header>
             <div class="dynTemplate" id="dynTemplate"></div>
        </div>
    </div>
</template>

Dashboard vue file:

<template>
    <div>
        <Mainlayout></Mainlayout>
        <div>
            <span><h1 align="center"> Welcome </h1> </span> 
        </div>
    </div>
</template>

<script>
import Mainlayout from './shared/Mainlayout.vue';

export default {
  el: '#appOne',
  components: {
    Mainlayout,
  }
}
</script>

What is correct way to use header, sidebar and other component which will call on click on sidebar options.

can you place a snippet code please, to better understand your problem — Mateus Martins
which snippet. I have already mentioned main.vue and dashboard.vue.. In dashboard main layout is included and other dashboard code is added below import. — Mihir Shah
Why don't you use vue-router? It provides simple solution for this. — tianzhipeng
I am already using router. but problem is my 1st screen is login where no header and sidebar.. but after login, header and sidebar comes. where I am unable to route to separate components — Mihir Shah

tianzhipeng tianzhipeng · Accepted Answer · 2019-02-26T10:34:12

Try this snippet. The mounted() and created() in header will be called only once.

Or if you need more dynamic view components, try named view

const Login = {
    template: `
    <div>
      <div>Login Page</div>
      <router-link to="/foo">click here</router-link>
    </div>
    `
}

const Sider = {
    template: '<div>This is sider</div>'
}
const Header = {
    template: '<div>This is header</div>',
    mounted() {
                console.log("header mounted")
    },
    created() {
        console.log("header created")
    },
}

const MainLayout = {
    template: `
    <div>
      <mysider></mysider>
      <div>
        <myheader></myheader>
        <router-view></router-view>
      </div>
    </div>
  `,
  components: {
    mysider: Sider,
    myheader: Header
  }
}

const Foo = {
    template: `
    <div>
        <div>This is Foo</div>
        <router-link to="/bar">go to Bar</router-link>
    </div>`
}
const Bar = {
    template: `
    <div>
        <div>This is Bar</div>
        <router-link to="/foo">go to Foo</router-link>
    </div>`
}

const router = new VueRouter({
    routes: [{
            path: '/',
            component: Login
        },
        {
            path: '/main',
            component: MainLayout,
            children: [
                {
                    path: '/foo',
                    component: Foo
                },
                {
                    path: '/bar',
                    component: Bar
                },
            ]
        }
    ]
})

const app = new Vue({
    router
}).$mount('#app')

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<div id="app">
  <router-view></router-view>
</div>

Vue js single page and siderbar with header issue

1 Answers