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

回答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'

....

来源：https://stackoverflow.com/questions/58313924/how-to-render-header-and-sidebar-after-login-using-vue