Изменить компонент боковой панели на основе компонента раздела контента в Vue

Вот мой раздел шаблона:

<template>
        <!-- START Home.vue section -->
        <div class="container-fluid" v-if="user.authenticated">
            <!-- START Sidebar.vue section -->
            <sidebar-component></sidebar-component>
            <!-- END Sidebar.vue section -->

            <div class="main-container">
                <!-- START Nav.vue section -->
                <nav-component></nav-component>
                <!-- END Nav.vue section -->

                <!-- START Content Section -->
                <router-view></router-view>
                <!-- END Content Section -->
            </div>
        </div>
        <!-- END Home.vue section -->
    </template>

Ясно, что он имеет 3 компонента: NavComponent, SidebarComponent, область основного компонента, которая будет заменена маршрутизируемым компонентом.

У меня есть другой компонент ApplicationList, который, когда он заменит раздел router-view вышеприведенного шаблона, должен заставить компонент боковой панели вести себя по-другому (скажем, например, боковая панель становится скрытой или ее фон становится красным).

Итак, как мне это сделать?


javascript vue.js css vue-loader
person rahulserver    schedule 21.03.2017    source источник
comment
В вашем представлении маршрутизатора у вас есть разные компоненты, которые будут размещаться в зависимости от пути, по которому вы находитесь, поэтому для каждого компонента вы хотите, чтобы боковая панель отображалась по-разному, это то, что вы хотите   -  person boomboxboy    schedule 21.03.2017

Ответы (1)


arrow_upward
0
arrow_downward

  1. Установите https://github.com/vuejs/vuex-router-sync . Это даст вам текущее состояние маршрута в вашем Vuex.
  2. В вашем <sidebar-component> просто укажите this.$store.state.route.name (или путь, или что вам нужно) и используйте его в своем v-if или каком-то watch .

Это самое простое и масштабируемое решение для обработки изменений в компонентах на основе текущего маршрута в приложении.

Надеюсь, поможет.

person Marek Urbanowicz    schedule 21.03.2017