Как визуализировать заголовок и боковую панель после входа в систему с помощью Vue

Question

У меня есть приложение Vue.js, в настоящее время я отображаю его на разных страницах. Я столкнулся с проблемой, когда при первом входе в систему он будет отображать только один основной компонент, который является страницей в соответствии с vue router. Я ищу способ запустить мою функцию входа в систему, затем перейдите к /dashboard, но я бы хотел, чтобы он перезапустил мой файл App.vue или нашел способ перезагрузить мой заголовок и боковую панель в приведенном ниже коде, чтобы подписать заголовоки боковая панель не отображается, когда я на /login, поэтому router.push('/dashboard') приводит ко всему, кроме отображения заголовка и боковой панели

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

Answer 1

Вы можете разместить свою страницу после входа в систему с помощью одного из родителей, например:

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

, а в MyLayout.vue вы можете поместить свой заголовок и боковую панель

ваш 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'

....