在Vue公司

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

1. 安装https://github.com/vuejs/vuex-router-sync。它会给你你当前的路线状态在你的Vuex。
2. 在你的<sidebar-component>只是指this.$store.state.route.name（或路径，或任何你需要的），并在你的v-if或一些watch使用它。

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

希望它有帮助。