Vue js 单页和侧边栏 header 问题

Question

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

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

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

因此，我的 firebase 侦听器附加在 header 调用中多次。我只想在登录后加载 header 一次，以便我可以正确使用 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>

使用 header、边栏和其他组件的正确方法是什么，这些组件将在单击边栏选项时调用。

Answer 1

试试这个片段。 header中的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>

Vue js 单页和侧边栏 header 问题

Vue js single page and siderbar with header issue

vue.js

vue-router