How to render header and sidebar after login using Vue

Question

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 that is the page according to vue router. I am looking for a way to have my login function run then go to /dashboard but I'd like it to rerender my App.vue file or find some way to reload my header and sidebar in the below code as sign now the header and sidebar don't display when I am on /login so the router.push('/dashboard') results in everything except the header and sidebar rendering

<Header />
<Sidebar v-if="!pageOptions.pageWithoutSidebar" />
<div id="content" class="content" v-bind:class="{ 'content-full-width': pageOptions.pageContentFullWidth, 'content-inverse-mode': pageOptions.pageContentInverseMode }">
    <router-view></router-view>
</div>

Add a check to your v-if that only evaluates to true if the user is authenticated — Phil
@Phil I have no need for that it would produce duplicate code, I check for that already in another part of my code. I was hoping for a way to refresh the content or force load the header and sidebar. — joshk132

Vaunt Vaunt · Accepted Answer · 2019-10-10T14:54:37

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'

....

How to render header and sidebar after login using Vue

1 Answers