Vue.js Vue js单页和带标题问题的侧边栏

我正在创建vue js应用程序。我有一个登录屏幕，在登录后，左边的边栏显示了仪表板、用户、设置等选项。。以及用于注销和通知功能的标题

我的架构是：我有一个公共文件（主布局），其中添加了标题和边栏。现在，在登录后第一次打开时，将调用主布局导入的仪表板

我只想调用此侧边栏和标题一次。。但问题是，每当我点击侧栏时，它就会打开容器右侧的相应屏幕，但侧栏和标题也会调用，因为我已经将主文件导入到每个组件中

因此，我的firebase侦听器多次附加在头调用中。我只想在登录后加载一次标题，以便正确使用firebase侦听器。 我的架构如下：

主布局文件：

<template>
    <div id="appOne">
        <div class="col-sm-3 col-lg-2 hamburger" style="padding-left: 0;">
            <Sidebar></Sidebar>
        </div>  
         <div class="col-sm-9 col-lg-10 fixed">
             <Header class="header"></Header>
             <div class="dynTemplate" id="dynTemplate"></div>
        </div>
    </div>
</template>

仪表板vue文件：

<template>
    <div>
        <Mainlayout></Mainlayout>
        <div>
            <span><h1 align="center"> Welcome </h1> </span> 
        </div>
    </div>
</template>

<script>
import Mainlayout from './shared/Mainlayout.vue';

export default {
  el: '#appOne',
  components: {
    Mainlayout,
  }
}
</script>

欢迎
从“/shared/Mainlayout.vue”导入Mainlayout；
导出默认值{
el:“#appOne”，
组成部分：{
主布局，
}
}

---

使用页眉、侧边栏和其他将调用单击侧边栏选项的组件的正确方法是什么。

试试这个片段。标头中的

mounted（）

和

created（）

将只调用一次

或者，如果需要更多动态视图组件，请尝试

const登录={
模板：`
登录页面
点击这里
`
}
常数Sider={
模板：“这是sider”
}
常数头={
模板：“这是标题”，
安装的（）{
控制台日志（“头安装”）
},
创建（）{
日志（“创建的头”）
},
}
常量主布局={
模板：`
`,
组成部分：{
我的思绪：赛德，
myheader:Header
}
}
常数Foo={
模板：`
我是福
去酒吧
`
}
常数条={
模板：`
这是酒吧
去福
`
}
常量路由器=新的VueRouter({
路线：[{
路径：“/”，
组件：登录
},
{
路径：'/main'，
组件：主布局，
儿童：[
{
路径：'/foo'，
组成部分：富
},
{
路径：'/bar'，
组件：棒
},
]
}
]
})
const app=新的Vue({
路由器
}).$mount（“#应用程序”）

为了更好地理解您的问题，您可以放置一段代码片段吗。我已经提到main.vue和dashboard.vue。。仪表板中包含主布局，其他仪表板代码添加到导入下方。抱歉，没有注意为什么不使用vue路由器？它提供了一个简单的解决方案。我已经在使用路由器了。但问题是我的第一个屏幕是登录，没有标题和边栏。。但在登录之后，标题和边栏会出现。我无法路由到单独的组件