0

这是我的模板部分： 

<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上述模板的部分，应该会导致侧边栏组件的行为不同（例如，侧边栏变为隐藏或背景变为红色）。

那么我该怎么做呢？

4

1 回答 1

0
  1. 安装https://github.com/vuejs/vuex-router-sync。它将在您的 Vuex 中为您提供当前的路由状态。
  2. 在你<sidebar-component>只是参考this.$store.state.route.name（或路径，或任何你需要的东西）并在你的v-if或一些watch.

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

希望能帮助到你。

于 2017-03-21T10:55:58.640 回答