Question

这是我的模板部分：

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

那我该怎么办？

Answer 1

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

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

希望它有所帮助。

根据Vue中的内容部分组件修改侧栏组件

1 个答案: