How To Render Header And Sidebar After Login Using Vue

I have a Vue.js application, currently I render it using different pages. I have run into an issue where when I login the first time it will only render the single main component t

Solution 1:

You can put your page after login with a parent like this :

const routes = [
  {
    path: '/',
    component: () => import('layouts/MyLayout.vue'),
    children: [ // ALL ROUTES AFTER LOGIN
      { path: '', component: () => import('pages/Index.vue') }
    ]
  }
]

and in MyLayout.vue you can put your header and sidebar

your MyLayout.vue :

<template>
  <div>
    <Header></Header>
    <SideBar></SideBar>
    <section>
        <router-view>
        </router-view>
    </section>

  </div>
</template>

<script>

import Header from '../layouts/Header.vue'
import SideBar from '../layouts/Sidebar.vue'

....