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, Commented Oct 10, 2019 at 0:48
@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
– joshk132, Commented Oct 10, 2019 at 1:11

Vaunt · Accepted Answer · 2019-10-10 14:54:37Z

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'

....

answered Oct 10, 2019 at 14:54

Vaunt

1261 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

joshk132 Over a year ago

Is there any way of doing this but not refactoring things too badly? Like would be awesome if it I could just push to /dashboard and reload the page fully or reload App.vue

dimroc Over a year ago

If you have a breadcrumb in the header, how would you update it? The user would navigate to diff pages in the main router-view section

Collectives™ on Stack Overflow

How to render header and sidebar after login using Vue

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related