在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使用它。

這是最簡單和最具擴展性的解決方案，可以根據應用程序中的當前路線處理組件更改。

希望它有幫助。