Vue JS одной страницы и боковой панели с проблемой заголовка - PullRequest
Новая
       5

Vue JS одной страницы и боковой панели с проблемой заголовка

0 голосов
/ 25 февраля 2019

Я создаю приложение vue js.У меня есть экран входа в систему и после входа в систему, левая боковая панель для параметров, таких как панель инструментов, пользователи, настройки ... и заголовок для функции выхода из системы и уведомления.

Моя архитектура: у меня есть 1 общий файл (основной макет), в котором заголовоки боковая панель добавляются.Теперь при первом открытии после входа в систему вызывается информационная панель, в которую импортируется основной макет.

Я хочу вызывать эту боковую панель и заголовок только один раз ... но проблема в том, что когда я нажимаю на боковую панель, она открывает соответствующий экран.в правой части контейнера, но боковая панель и заголовок также вызывает, поскольку я импортировал основной файл в каждый компонент.

Из-за этого мой прослушиватель Firebase подключен к заголовкам несколько раз.Я хочу загрузить заголовок только один раз после входа в систему, чтобы я мог правильно использовать firebase listener.Моя архитектура ниже:

основной файл макета: 

<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>

Файл панели мониторинга: 

<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>

Как правильно использовать заголовок, боковую панель и другие компоненты, которыебудет вызывать при нажатии на опции боковой панели.

1 Ответ

0 голосов
/ 26 февраля 2019

Попробуйте этот фрагмент.Заголовки mounted() и created() будут вызываться только один раз.

Или, если вам нужно больше компонентов динамического представления, попробуйте именованное представление 

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>
...