Question

我正在创建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>

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

Answer 1

尝试此代码段。标头中的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单页和带有标题问题的补充工具栏

1 个答案: