Vue js单页和带有标题问题的侧边栏答案

【问题标题】：Vue js single page and siderbar with header issueVue js单页和带有标题问题的侧边栏
【发布时间】：2019-07-18 22:46:34
【问题描述】：

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

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

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

因此，我的 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>

什么是使用标题、侧边栏和其他组件的正确方法，这些组件会在点击侧边栏选项时调用。

【问题讨论】：

能否请您提供一个sn-p代码，以便更好地了解您的问题
哪个sn-p。我已经提到过 main.vue 和 dashboard.vue.. 在仪表板中包含主布局，并在导入下方添加了其他仪表板代码。
抱歉，没注意
为什么不用vue-router？它为此提供了简单的解决方案。
我已经在使用路由器了。但问题是我的第一个屏幕是登录，没有标题和侧边栏。但登录后，标题和侧边栏出现。我无法路由到单独的组件

标签： vue.js vue-router

【解决方案1】：

试试这个 sn-p。标头中的mounted() 和created() 只会被调用一次。

或者如果你需要更多动态视图组件，试试named view

const Login = {
    template: `
    <div>
      <div>Login Page</div>
      <router-link to="/foo">click here</router-link>
    </div>
    `
}

const Sider = {
    template: '<div>This is sider</div>'
}
const Header = {
    template: '<div>This is header</div>',
    mounted() {
                console.log("header mounted")
    },
    created() {
        console.log("header created")
    },
}

const MainLayout = {
    template: `
    <div>
      <mysider></mysider>
      <div>
        <myheader></myheader>
        <router-view></router-view>
      </div>
    </div>
  `,
  components: {
    mysider: Sider,
    myheader: Header
  }
}

const Foo = {
    template: `
    <div>
        <div>This is Foo</div>
        <router-link to="/bar">go to Bar</router-link>
    </div>`
}
const Bar = {
    template: `
    <div>
        <div>This is Bar</div>
        <router-link to="/foo">go to Foo</router-link>
    </div>`
}

const router = new VueRouter({
    routes: [{
            path: '/',
            component: Login
        },
        {
            path: '/main',
            component: MainLayout,
            children: [
                {
                    path: '/foo',
                    component: Foo
                },
                {
                    path: '/bar',
                    component: Bar
                },
            ]
        }
    ]
})

const app = new Vue({
    router
}).$mount('#app')

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<div id="app">
  <router-view></router-view>
</div>

【讨论】：