javascript - 如何使用Vue登录后渲染标题和侧边栏

Question

我有一个 Vue.js 应用程序，目前我使用不同的页面渲染它。我遇到了一个问题，当我第一次登录时，它只会渲染单个主要组件，即根据 vue 路由器的页面。我正在寻找一种方法来运行我的登录功能，然后转到 /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'

....