Vue中基于content section组件修改侧边栏组件答案

【问题标题】：Modify sidebar component based on content section component in VueVue中基于content section组件修改侧边栏组件
【发布时间】：2017-03-21 09:43:54
【问题描述】：

这是我的模板部分：

<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, Main 组件区域将被路由组件替换。

我有另一个组件 ApplicationList 组件，它什么时候会替换上面模板的 router-view 部分，应该会导致侧边栏组件的行为不同（例如侧边栏被隐藏或它的背景变成红色）。

那我该怎么做呢？

【问题讨论】：

在您的路由器视图中，您有不同的组件，这些组件将根据您所在的路径放置，，，所以对于每个组件，您希望侧边栏以不同的方式显示，，，，这就是您哇

标签： javascript css vue.js vue-loader

【解决方案1】：

安装https://github.com/vuejs/vuex-router-sync。它会在你的 Vuex 中为你提供当前的路由状态。
在您的<sidebar-component> 中只需引用this.$store.state.route.name（或路径，或您需要的任何内容）并在您的v-if 或一些watch 中使用它。

这是根据应用程序中的当前路由处理组件更改的最简单且最具可扩展性的解决方案。

希望对你有帮助。

【讨论】：